Angular Forms and Inputs have various states that are useful when validating content
Input States
State | Description |
---|---|
$touched | Field has been touched |
$untouched | Field has not been touched |
$pristine | Field has not been modified |
$dirty | Field has been modified |
$valid | Field content is valid |
$invalid | Field 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>
</form>
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.