$ dirty vs $ invalid: Qual è la differenza?

Question

Sono novizio in angolare. Sono confuso da $dirty e $invalid, sembrano quasi gli stessi.

Qual è la differenza tra $dirty e $invalid utilizzato in emaildg-model? Di seguito è il scenario. È un modulo di esempio W3Schools.

<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate> 
    <p> 
     Username:<br> 
     <input type="text" name="user" ng-model="user" required> 
     <span style="color: red" ng-show="myForm.user.$dirty && myForm.user.$invalid"> 
      <span ng-show="myForm.user.$error.required">Username is required.</span> 
     </span> 
    </p> 
    <p> 
     Email:<br> 
     <input type="email" name="emaill" ng-model="email" required> 
     <span style="color: red" ng-show="myForm.email.$dirty && myForm.email.$invalid"> 
      <span ng-show="myForm.email.$error.required">Email is required.</span> 
      <span ng-show="myForm.email.$error.email">Invalid email address.</span> 
     </span> 
    </p> 
    <p> 
     <input type="submit" ng-click="Count()" 
      ng-disabled="myForm.$invalid" title="Submit" value="Submit"> 
    </p> 
</form> 

EDIT 1:

mi chiedo se cambio il nome ng modello email-email8 non funziona più.

<input type="email" name="emaill" ng-model="email8" required> 

Sia la convalida sta facendo da myForm html nome di un elemento che non è definito mediante l'attributo ng. Come funziona?

ng-show="myForm.email.$dirty && myForm.email.$invalid" 

Answer 1

• $dirty: Sarà TRUE, se l'utente ha già interagito con il modulo.
• $invalid: VERO, se almeno un modulo e un controllo non è valido.

Source

Also on Angular Docs

Dopo l'aggiornamento in questione ... La convalida è stato fatto sul nome dell'elemento form. Tutti i modelli di ng all'interno di un modulo vengono tracciati ed è così che funziona.

Anche la modifica di un nome di modello ng non avrà alcun impatto sulla convalida. Ho provato il tuo link e funziona per me. Questo deve funzionare.

Answer 2

$ dirty è True se l'utente ha già interagito con l'input. E $ invalid è true se l'input non è un indirizzo email valido

Answer 3

$dirty significa che l'utente ha modificato il valore di input, $invalid significa che l'indirizzo stesso non è valido. Pertanto, l'errore viene visualizzato solo se l'utente ha attivamente modificato il valore di input su un valore vuoto o non valido.

Answer 4

$error è l'oggetto di errori in cui la chiave è il nome di convalida del campo e il valore è il messaggio di errore effettivo

<input type="email" name="emailName" ng-model="email" required> 

per questo esempio myForm.emailName.$error.email = true se email non corrisponde con il formato. myForm.emailName.$error.required = true se non è stato aggiunto anyhting nel campo di input

è possibile controllare valido o non di campo direttamente utilizzando myForm.emailName.$valid ma il problema nel tuo caso è che vogliono mostrare all'utente che cosa è l'errore di avere due casi.così sono entrati in $error object per verificare la error is required email or invalid email

1.Email is required. 
2.Invalid email address. 

così hanno usato $error oggetto. questo è il modo in myForm.emailName appare:

{"$viewValue":"ss","$validators":{},"$asyncValidators":{},"$parsers":[],"$formatters":[null],"$viewChangeListeners":[],"$untouched":false,"$touched":true,"$pristine":false,"$dirty":true,"$valid":false,"$invalid":true,"$error":{"email":true},"$name":"emailName","$options":null} 

penso che l'esempio di fornire da voi spiega molte cose.