$ dirty vs $ invalid: What is the difference?

Question

I'm new to the corner. I am confused by $dirty and $invalid , they sound almost the same.

What is the difference between $dirty and $invalid used in email ng-model ? Below is a scenario . This is an example of a W3Schools form.

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

I am wondering if I change the name of ng-model from email to email8 it doesn't work anymore.

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

myForm a check on myForm HTML element myForm that is not defined using the ng attribute. How it works?

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

Answer 1

• $dirty : This will be TRUE if the user is already interacting with the form.
• $invalid : This will be TRUE if at least one containing form and control are invalid.

A source

Also in Angular Docs

After updating the Question ... Checks the verification of the name of the form element. All ng models within the form are tracked, and that is how it works.

Also changing the name of the ng model will not affect the validation. I tried your link and it works for me. That should work.

Answer 2

$ dirty True if the user is already interacting with the input. And $ invalid is true if the login is not a valid email address

Answer 3

$dirty means that the user has changed the input value, $invalid means that the address itself is invalid. Therefore, an error is displayed only if the user has actively changed the input value to a null or invalid value.

Answer 4

$error is an $error object when the key is the name of the field check and the value is the actual error message

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

for this example, myForm.emailName.$error.email = true if the email address is not myForm.emailName.$error.email = true . myForm.emailName.$error.required = true if you did not add any input to the input field

you can check whether the field is correct or not directly using myForm.emailName.$valid , but the problem in your case is that they want to show the user what is an error, having two cases. so they went into the $error object to check for error is required email or invalid email

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

therefore they used the $error object. it looks like myForm.emailName:

 {"$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} 

I think the example provided by you explains a lot.

Answer 5

You made a mistake. That's why it does not work, you can see below the code that you wrote

 <pre> <input type="email" name="emaill" ng-model="email8" required> <ng-show="myForm.email.$dirty && myForm.email.$invalid"> </pre> 

Why it didn’t work, because you entered the name "emaill" in myForm.email.$dirty you gave "email". If both names should be the same, this will work fine.

 <pre> <input type="email" name="emaill" ng-model="email8" required> <ng-show="myForm.emaill.$dirty && myForm.emaill.$invalid"></pre>