Validate three fields

Asked

Viewed 312 times

1

I have three fields and I have to validate sending the message ng-mensage of the first field whenever a value is exchanged and preventing the form from being submitted.

The sum of the field número 2 and número 3 cannot be greater than the field value número 1.

How do I validate?

<form name="form">
    <md-input-container >
      <label>Numero1</label>
      <input required="" 
           name="numero1" 
           ng-model="obj.numero1"      
           ng-pattern="/^[0-9]{0,10}$/">
      <div ng-messages="form.numero1.$error">
         <div ng-message="required">Este campo é obrigatório.</div>
         <div ng-message="pattern">Apenas números</div>
      </div>
    </md-input-container>
     <md-input-container>        
      <label>Número 2</label>          
      <input required="" 
           name="numero2" 
           ng-model="obj.numero2"     
           ng-pattern="/^[0-9]{0,10}$/">        
      <div ng-messages="form.numero2.$error" >
         <div ng-message="required">Este campo é obrigatório.</div>
         <div ng-message="pattern">Apenas números</div>
      </div>        
    </md-input-container>
     <md-input-container >     
      <label>Número 3</label>      
      <input required="" 
           name="numero3" 
           ng-model="obj.numero3"     
           ng-pattern="/^[0-9]{0,10}$/"> 
      <div ng-messages="form.numero3.$error" >
         <div ng-message="required">Este campo é obrigatório.</div>
         <div ng-message="pattern">Apenas números</div>
      </div>   
    </md-input-container>    
</form>

3 answers

0

The simplest way would be to use the min. In that case, I put in for min of the first input is equal to the sum of the other two inputs, and includes a ng-message for min:

<md-input-container >
  <label>Numero1</label>
  <input required="" 
       name="numero1" 
       type="number"
       ng-model="obj.numero1" 
       min="{{ obj.numero2 + obj.numero3 }}"
       ng-pattern="/^[0-9]{0,10}$/">
  <div ng-messages="form.numero1.$error">
     <div ng-message="required">Este campo é obrigatório.</div>
     <div ng-message="pattern">Apenas números</div>
     <div ng-message="min">Mínimo {{ obj.numero2 + obj.numero3 }}</div>
  </div>
</md-input-container>

It is necessary to put type="number" in the 3 inputs.

In the first input, so that the min work, it is necessary to put this type="number". In other inputs it is also necessary to put, otherwise if you type 1 and 2 in them respectively, the result of {{ obj.numero2 + obj.numero3 }} will be "12" instead of "3".

Follows plunker for testing and analysis.

0


An option that can help you is to put in the form novalidate:

<form name="form" novalidate>

In the controller, in the role of submit you can capture whether the form is valid or not.

$scope.form.$setSubmitted(true);
if (!$scope.form.$valid) return;

$valid is true or false if the form is valid itself.

  • Fabio Luis Alexandre thanks for the reply. I have to validate so q move to another field and display in ng-message

  • Ideal then is to create a directive to do this for you, where is passed the name of the field to be checked and an object with the errors to be displayed. you can control by ng-if="ngModelController. $$parentForm. $submitted || ngModelController. $Touched" https://scotch.io/tutorials/angularjs-form-validation-with-ngmessages This link is really nice for you to study and apply.

0

You can submit if form != $invalid, example

<form name="form">
    <md-input-container >
      <label>Numero1</label>
      <input required="" 
           name="numero1" 
           ng-model="obj.numero1"      
           ng-pattern="/^[0-9]{0,10}$/">
      <div ng-messages="form.numero1.$error">
         <div ng-message="required">Este campo é obrigatório.</div>
         <div ng-message="pattern">Apenas números</div>
      </div>
    </md-input-container>
     <md-input-container>        
      <label>Número 2</label>          
      <input required="" 
           name="numero2" 
           ng-model="obj.numero2"     
           ng-pattern="/^[0-9]{0,10}$/">        
      <div ng-messages="form.numero2.$error" >
         <div ng-message="required">Este campo é obrigatório.</div>
         <div ng-message="pattern">Apenas números</div>
      </div>        
    </md-input-container>
     <md-input-container >     
      <label>Número 3</label>      
      <input required="" 
           name="numero3" 
           ng-model="obj.numero3"     
           ng-pattern="/^[0-9]{0,10}$/"> 
      <div ng-messages="form.numero3.$error" >
         <div ng-message="required">Este campo é obrigatório.</div>
         <div ng-message="pattern">Apenas números</div>
      </div>   
    </md-input-container> 
</form>

<md-button flex class="md-raised" ng-click="add(obj)" ng-disabled="form.$invalid">Confirmar</md-button>

Note that I added a commit button

The controller will stay that way

$scope.result = [];
$scope.add = function (el) {
    if(!$scope.form.$invalid){
    var soma = (parseInt(el.numero3) + parseInt(el.numero2)); 
    if(parseInt(el.numero1) > soma ){
        $scope.result.push(angular.copy(el));
      delete $scope.el;
      $scope.form.$setPristine();
      console.log($scope.result);
      alert('valido!');
    }else{
        alert('invalido!');
    }            
   }
    };
  • Felipe Duarte fought for the answer. The problem is that I can not validate in the boot this is the problem

  • I’ll edit the answer

  • ready, added resolution based on your code, it’s likely to work

Browser other questions tagged

You are not signed in. Login or sign up in order to post.