AngularJS
Convalida del modulo

Convalida del modulo di base

Uno dei punti di forza di Angular è la convalida della forma lato client.

Affrontare gli input di form tradizionali e dover usare l'elaborazione interrogativa in stile jQuery può essere dispendioso in termini di tempo e pignolo. Angular consente di produrre facilmente forme interattive professionali.

La direttiva ng-model fornisce l'associazione bidirezionale con i campi di input e solitamente l'attributo novalidate viene anche inserito sull'elemento form per impedire al browser di eseguire la convalida nativa.

Quindi, una forma semplice sarebbe simile a:

<form name="form" novalidate>
  <label name="email"> Your email </label>
  <input type="email" name="email" ng-model="email" />
</form>

Affinché Angular convalidi gli input, utilizzare esattamente la stessa sintassi di un normale elemento di input , fatta eccezione per l'aggiunta dell'attributo ng-model per specificare la variabile da associare all'ambito. L'email è mostrata nell'esempio precedente. Per convalidare un numero, la sintassi sarebbe:

<input type="number" name="postalcode" ng-model="zipcode" />

I passaggi finali per la convalida del modulo di base sono la connessione a una funzione di invio del modulo sul controller utilizzando ng-submit , anziché consentire l'invio del modulo predefinito. Questo non è obbligatorio, ma viene solitamente utilizzato, poiché le variabili di input sono già disponibili nell'ambito e quindi disponibili per la funzione di invio. Di solito è anche una buona pratica dare un nome al modulo. Queste modifiche comporterebbero la seguente sintassi:

<form name="signup_form" ng-submit="submitFunc()" novalidate>
  <label name="email"> Your email </label>
  <input type="email" name="email" ng-model="email" />
  <button type="submit">Signup</button>
</form>

Questo codice sopra è funzionale, ma esistono altre funzionalità fornite da Angular.

Il passo successivo è capire che Angular allega gli attributi di classe usando ng-pristine , ng-dirty , ng-valid e ng-invalid per l'elaborazione dei moduli. L'utilizzo di queste classi nel tuo css ti consentirà di definire i campi di input validi / non validi, pristine / dirty e quindi di alterare la presentazione mentre l'utente sta inserendo i dati nel modulo.

Forma e Stati di input

Forme e input angolari hanno vari stati che sono utili quando si convalida il contenuto

Stati di input

Tutti gli stati sopra riportati sono proprietà booleane e possono essere sia vere che false.

Con questi, è molto facile visualizzare messaggi a un utente.

<form name="myForm" novalidate>
    <input name="myName" ng-model="myName" required>
    <span ng-show="myForm.myName.$touched && myForm.myName.$invalid">This name is invalid</span>
</form>

Qui, stiamo usando la direttiva ng-show per mostrare un messaggio ad un utente se hanno modificato un modulo ma non è valido.

Classi CSS

Angular fornisce anche alcune classi CSS per moduli e input a seconda del loro stato

Puoi usare queste classi per aggiungere stili ai tuoi moduli

input.ng-invalid {
  background-color: crimson;
}
input.ng-valid {
  background-color: green;
}

ngMessages

ngMessages viene utilizzato per migliorare lo stile per la visualizzazione dei messaggi di convalida nella vista.

Approccio tradizionale

Prima di ngMessages , normalmente visualizziamo i messaggi di convalida usando le direttive predefinite angolari ng-class . Questo approccio consisteva in rifiuti e un'attività repetitive .

Ora, usando ngMessages , possiamo creare i nostri messaggi personalizzati.

Esempio

Html:

<form name="ngMessagesDemo">
  <input name="firstname" type="text" ng-model="firstname" required>
  <div ng-messages="ngMessagesDemo.firstname.$error">
    <div ng-message="required">Firstname is required.</div>
  </div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular-messages.min.js"></script>

JS:

var app = angular.module('app', ['ngMessages']);

app.controller('mainCtrl', function ($scope) { 
    $scope.firstname = "Rohit";
});

Convalida del modulo personalizzato

In alcuni casi la convalida di base non è sufficiente. Convalida personalizzata del supporto angolare che aggiunge funzioni di $validators all'oggetto $validators su ngModelController :

angular.module('app', [])
  .directive('myValidator', function() {
    return {
      // element must have ng-model attribute
      // or $validators does not work
      require: 'ngModel',
      link: function(scope, elm, attrs, ctrl) {
        ctrl.$validators.myValidator = function(modelValue, viewValue) {
            // validate viewValue with your custom logic
            var valid = (viewValue && viewValue.length > 0) || false;
            return valid; 
        };
      } 
    };

Il validatore è definito come una direttiva che richiede ngModel , quindi per applicare il validatore basta aggiungere la direttiva personalizzata al controllo del modulo di input.

<form name="form">
  <input type="text" 
         ng-model="model" 
         name="model" 
         my-validator>
  <pre ng-bind="'my-validator returned: ' + form.model.$valid"></pre>
</form> 

E il my-validator non deve essere applicato al controllo dei moduli nativi. Può essere qualsiasi elemento, purché come ng-model nei suoi attributi. Ciò è utile quando hai un componente ui di build personalizzato.

Moduli nidificati

A volte è preferibile annidare le forme allo scopo di raggruppare i controlli e gli ingressi logicamente sulla pagina. Tuttavia, i moduli HTML5 non devono essere nidificati. Forniture angolari invece di ng-form .

<form name="myForm" noValidate>
  <!-- nested form can be referenced via 'myForm.myNestedForm' -->
  <ng-form name="myNestedForm" noValidate>
    <input name="myInput1" ng-minlength="1" ng-model="input1" required />
    <input name="myInput2" ng-minlength="1" ng-model="input2" required />
  </ng-form>

  <!-- show errors for the nested subform here -->
  <div ng-messages="myForm.myNestedForm.$error">
    <!-- note that this will show if either input does not meet the minimum -->
    <div ng-message="minlength">Length is not at least 1</div>
  </div>
</form>

<!-- status of the form -->
<p>Has any field on my form been edited? {{myForm.$dirty}}</p>
<p>Is my nested form valid? {{myForm.myNestedForm.$valid}}</p>
<p>Is myInput1 valid? {{myForm.myNestedForm.myInput1.$valid}}</p>

Ogni parte del modulo contribuisce allo stato generale del modulo. Pertanto, se uno degli input myInput1 è stato modificato ed è $dirty , il suo modulo contenente sarà anche $dirty . Questa cascata a ogni modulo che contiene, in modo che entrambi myNestedForm e myForm sarà $dirty .

Validatori asincroni

I validatori asincroni consentono di convalidare le informazioni del modulo sul back-end (utilizzando $ http).

Questi tipi di validatori sono necessari quando è necessario accedere alle informazioni memorizzate sul server che non si possono avere sul client per vari motivi, come la tabella degli utenti e altre informazioni sul database.

Per utilizzare i validatori asincroni, si accede al ng-model del proprio input e si definiscono le funzioni di callback per la proprietà $asyncValidators .

Esempio:

L'esempio seguente controlla se esiste già un nome fornito, il backend restituirà uno stato che rifiuterà la promessa se il nome esiste già o se non è stato fornito. Se il nome non esiste, restituirà una promessa risolta.

ngModel.$asyncValidators.usernameValidate = function (name) {               
     if (name) {
          return AuthenticationService.checkIfNameExists(name); // returns a promise
     } else {
          return $q.reject("This username is already taken!"); // rejected promise
     }
};

Ora ogni volta che viene modificato il ng-model dell'ingresso, questa funzione verrà eseguita e restituirà una promessa con il risultato.