Validate three fields

Question

Validate three fields

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

1

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

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

How do I validate this?

<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>

angularjs angular-material

asked by anonymous 19.09.2017 / 09:00

3 answers

Compare two values with jquery What would it be and how to use NameVirtualHost *: 80?

score 0 · Answer 1

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

<form name="form" novalidate>

No controller , in the submit function 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 per se.

score 0 · Answer 2

You can submit 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>

Notice that I've added a button for submission

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

score 0 · Answer 3

The simplest way would be to use min . In this case, I have put so that the min of the first input equals the sum of the other two inputs, and I include 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" on the 3 inputs.

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

Follow plunker for testing and analysis.