Validate three fields

Question

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>

Answer 1

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.

Answer 2

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.

Answer 3

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!');
    }            
   }
    };