AngularJS Form and Input States


Angular Forms and Inputs have various states that are useful when validating content

Input States

$touchedField has been touched
$untouchedField has not been touched
$pristineField has not been modified
$dirtyField has been modified
$validField content is valid
$invalidField content is invalid

All of the above states are boolean properties and can be either true or false.

With these, it is very easy to display messages to a user.

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

Here, we are using the ng-show directive to display a message to a user if they've modified a form but it's invalid.