Handling $dirty, $touched, $invalid, $pristine states

What You’ll Learn

What $dirty, $touched, $invalid, and $pristine mean
How AngularJS tracks form field states
Practical examples of handling these states
Best practices for dynamic error handling

---

1️⃣ Understanding AngularJS Form States

AngularJS automatically assigns states to form fields. These states help track user interaction and validation errors.

State	Description
$dirty	The field has been modified (user has typed something).
$pristine	The field has not been modified since page load.
$touched	The field has been clicked or focused at least once.
$invalid	The field contains an invalid value.

Why are these states important?
Helps show real-time error messages only when the user interacts with the field.
Avoids showing errors before the user starts typing.

---

2️⃣ Example: Using $dirty, $touched, $invalid, and $pristine

Let’s create a simple form to see these states in action.

HTML Form with Validation

<div ng-app="myApp" ng-controller="FormController">
    <form name="userForm" novalidate>
        
        <!-- Name Field -->
        <label>Name:</label>
        <input type="text" name="name" ng-model="user.name" required />
        <span class="error" ng-show="userForm.name.$touched && userForm.name.$invalid">
            Name is required.
        </span>

        <!-- Email Field -->
        <label>Email:</label>
        <input type="email" name="email" ng-model="user.email" required />
        <span class="error" ng-show="userForm.email.$dirty && userForm.email.$error.required">
            Email is required.
        </span>
        <span class="error" ng-show="userForm.email.$dirty && userForm.email.$error.email">
            Enter a valid email address.
        </span>

        <!-- Phone Field -->
        <label>Phone:</label>
        <input type="text" name="phone" ng-model="user.phone" ng-pattern="/^\d{10}$/" required />
        <span class="error" ng-show="userForm.phone.$touched && userForm.phone.$error.required">
            Phone number is required.
        </span>
        <span class="error" ng-show="userForm.phone.$dirty && userForm.phone.$error.pattern">
            Enter a valid 10-digit phone number.
        </span>

        <!-- Form Status -->
        <p>Form is {{ userForm.$dirty ? 'Dirty' : 'Pristine' }}</p>

        <br />
        <button type="submit" ng-disabled="userForm.$invalid">Submit</button>
    </form>
</div>

CSS for Styling the Errors

.error {
    color: red;
    font-size: 12px;
}

---

3️⃣ Understanding the Logic Behind It

$dirty vs $touched

Condition	Description
userForm.email.$dirty	Shows error if the user types something and then removes it.
userForm.email.$touched	Shows error as soon as the user clicks the field and moves away without typing anything.

When to use $dirty?
Use $dirty if you want to hide errors until the user types something.
When to use $touched?
Use $touched if you want to show errors immediately after clicking away.

---

4️⃣ Tracking Form State in AngularJS

AngularJS provides form-level states too:

Form State	Description
$pristine	The form has not been touched yet.
$dirty	At least one field in the form has been changed.
$valid	The form is valid.
$invalid	The form has at least one invalid field.

🔹 Showing Form State in Real-Time

<p>Form is {{ userForm.$dirty ? 'Dirty' : 'Pristine' }}</p>
<p>Form is {{ userForm.$valid ? 'Valid' : 'Invalid' }}</p>