come convalidare il modulo in ionico usando angolare js

Sto provando ad usare la struttura ionica con angolare. Voglio fare la convalida del mio modulo sul click del tasto. Mezzo ho bisogno di convalidare tutto il campo sul clic del pulsante. Tutti i campi sono obbligatori .. Devo mostrare un messaggio di errore se un campo non soddisfa il requisito. Come password minimo carattere 5 e massimo 10. E convalida e-mail.come convalidare il modulo in ionico usando angolare js

per favore potete dire a m come farò validation.Here è il mio code

<html ng-app=""> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 

    <title>Sign-in, Then Tabs Example</title> 

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> 
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> 

    </head> 

    <body> 

    <ion-view title="Page"> 
    <ion-content padding="true" class="has-header has-footer"> 
     <form> 
      <label class="item item-input"> 
       <span class="input-label">name</span> 
       <input type="text" placeholder="name"> 
      </label> 
      <label class="item item-input"> 
       <span class="input-label">email</span> 
       <input type="email" placeholder="email"> 
      </label> 
      <label class="item item-input"> 
       <span class="input-label">password</span> 
       <input type="password" placeholder="password"> 
      </label> 
     </form> 
     <button class="button button-balanced button-block">check validation</button> 
    </ion-content> 
</ion-view> 

    </body> 
</html>

fonte

2015-03-18 Shruti

potrei essere in ritardo, ma ecco cosa si può fare.

Prima di tutto è necessario definire un modulo (come hai fatto) utilizzando la direttiva ng-submit in modo che il modulo possa essere POST sul controller.

<body ng-app="myApp"> 
    <ion-view title="Page"> 
    <ion-content padding="true" class="has-header has-footer"> 
     <form name="loginForm" ng-submit="$scope.login($scope.user);" novalidate> 
      <label class="item item-input"> 
       <span class="input-label">name</span> 
       <input type="text" placeholder="name" ng-model="$scope.user.username" form-validate-after> 
      </label> 
      <label class="item item-input"> 
       <span class="input-label">email</span> 
       <input type="email" placeholder="email" ng-model="$scope.user.email" form-validate-after> 
      </label> 
      <label class="item item-input"> 
       <span class="input-label">password</span> 
       <input type="password" placeholder="password" ng-model="$scope.user.password" form-validate-after> 
      </label> 
     </form> 
     <button class="button button-balanced button-block">check validation</button> 
    </ion-content> 
</ion-view> 
</body>

Sto passando un modello al mio campo di input in modo che possa leggerli in seguito. Ho contrassegnato ciascun input con una direttiva personalizzata form-validate-after.

Questa è la direttiva che ho creato:

(function() { 

    'use strict'; 

    angular 
     .module('myApp', ['ionic']) 
     .directive('formValidateAfter', formValidateAfter); 

    function formValidateAfter() { 
     var directive = { 
      restrict: 'A', 
      require: 'ngModel', 
      link: link 
     }; 

     return directive; 

     function link(scope, element, attrs, ctrl) { 
      var validateClass = 'form-validate'; 
      ctrl.validate = false; 
      element.bind('focus', function (evt) { 
       if (ctrl.validate && ctrl.$invalid) // if we focus and the field was invalid, keep the validation 
       { 
        element.addClass(validateClass); 
        scope.$apply(function() { ctrl.validate = true; }); 
       } 
       else { 
        element.removeClass(validateClass); 
        scope.$apply(function() { ctrl.validate = false; }); 
       } 

      }).bind('blur', function (evt) { 
       element.addClass(validateClass); 
       scope.$apply(function() { ctrl.validate = true; }); 
      }); 
     } 
    } 

}());

questo codice in loop attraverso tutti i vostri campi di input aggiungendo una classe se è contrassegnato come non valido.

è necessario definire un css:

.form-validate.ng-invalid { 
    border: 3px solid #cc2511; 
} 
.form-validate.ng-valid { 
    border: none; 
}

non dimenticate di aggiungere novalidate al form.

novalidate viene utilizzato per disabilitare la convalida del modulo nativo del browser.

Se si desidera impostare un campo come obbligatorio e definire max e min Lunghezza:

<input name="password" type="password" placeholder="password" ng-model="$scope.user.password" required ng-minlength='5' ng-maxlength='10'>

Se volete vedere questo campione in azione si può controllare here.

UPDATE

Un altro approccio è quello di impostare tutto in linea cambiare classe su ogni etichetta:

<label class="item item-input" ng-class="{ 'has-errors' : loginForm.username.$invalid && !loginForm.username.$pristine, 'no-errors' : loginForm.username.$valid}"> 
    ... 
</label>

Qui si deve dare ogni campo un name e utilizzare ng-class direttiva.

La direttiva ngClass consente di impostare dinamicamente classi CSS su un elemento HTML dalla associazione dati un'espressione che rappresenta tutte le classi da aggiungere.

È possibile vederlo in azione here.

fonte

2015-05-06 13:35:19 LeftyX

come convalidare il modulo in ionico usando angolare js

risposta

Problemi correlati