$dirty vs $invalid: What is the difference?

Question

I am a novice in angular. I am confused by $dirty and $invalid, they almost sound the same.

What is the difference between $dirty and $invalid used in email ng-model? Below is the scenario. It's an example form 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:

I am wondering if I change the ng-model name from email to email8 it's not working anymore.

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

Whether the validation is doing by myForm HTML element name which is not defined using ng attribute. How does it work?

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

Answer 1

• $dirty: It will be TRUE, if the user has already interacted with the form.
• $invalid: It will be TRUE, if at least one containing form and control is invalid.

Source

Also on Angular Docs

After the update in the Question...The validation is being done on the form element name. All the ng-models inside a form is tracked and that is how it is working.

Also changing a ng-model name will have no impact on validation. I tried your link and it works for me. That has to work.

Answer 2

$dirty means the user has changed the input value, $invalid means the address itself is invalid. Therefore the error is only shown if the user has actively changed the input value to either an empty or invalid value.

Answer 3

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

Answer 4

$error is the object of errors where the key is the field validation name and value is the actual error message

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

for this example myForm.emailName.$error.email = true if email is not matched with format. myForm.emailName.$error.required = true if you haven't added anyhting in input field

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

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

so they used $error object. this is how myForm.emailName looks:

{"$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 provide by you explains a lot.