by In this part, we would look at form validation. So we look at the following
1. Native HTML Validation
You can use the same native HTML validation. Just add the validation attributes as required. However, you need to add ngNativeValidate to the <form> tag.
List of attributes are given in the table below:
| Attribute | Supported input types | Possible values | Description |
| pattern | text, search, tel, email or password | regular expression | Value input must match the pattern. |
| min | range, number | Any valid number | Input value must be greater than or equal to the value. |
| date, month, week | valid date | ||
| datetime, datetime-local, time | Any valid date and time | ||
| max | range, number | Any valid number | Input value must be less than or equal to the value |
| date, month, week | Any valid date | ||
| datetime, datetime-local, time | Any valid date and time | ||
| required | Just about any kind of input | none since it is a Boolean attribute: its presence means true, its absence means false | There must be some value (if set). |
| step | date | Any integer number of days | Unless step is set to the any literal, the value must equal min + an integral multiple of the step. |
| month | Any integer number of months | ||
| week | Any integer number of weeks | ||
| datetime, datetime-local or time | Any integer number of seconds | ||
| range, number | Any integer | ||
| minlength | Input elements that accept text or password | Any integer length | The number of chars must not be less than the value of the attribute, if non-empty. |
| maxlength | Input elements that accept password or text | Any integer length | The number of chars must not exceed the value of the attribute. |
2. Template-Driven Form Validation
Interestingly, Angular uses validation attributes similar to native HTML. I uses directives to match the attributes with validation functions available in the framework.
Anytime the value of a form control is modified, Angular re-validates the inputs and generate a list of validation error which results in an INVALID status. If no errors are generated, a VALID status is returned.
You can get the status of the form as a whole or the status of individual controls. For individual controls, you need to export the ngModel to a local template variable. The code below illustrates this
<div class="form-group"> <label >Firstname</label> <input class="form-control" name="firstname" [(ngModel)]="person.firstname" #firstname="ngModel" required minlength="3" maxlength="8"> </div>
Note: the #firstname = “ngModel” exports the NgModel into a local variable called firstname. This is NOT the same as person.firstname!
3. Displaying Error Messages
When there is validation error, you need to display a meaningful error message to the user. To achieve this, you first check the status of the control and use an Angular conditional directive to display a message based on which validation error occurred. Learn about Angular Directives here.
The code below does just that.
<div *ngIf="firstname.invalid && (firstname.dirty || firstname.touched)" class="alert alert-danger"> <div *ngIf="firstname.errors.minlength"> Firstname must be 3 characters or more </div> <div *ngIf="firstname.errors.maxlength"> Firstname must be 8 characters or less </div> <div *ngIf="firstname.errors.required"> You must enter a firstname </div> </div>
The outer directive checks for invalid input. Also, validation is triggered only when the control is touched or dirty. Then, the inner directive detects the particular type of error.
You can be a bit more creative with validation by displaying nicer styles like shown below. See my Validation Tutorial and step by step video
Now, we have covered the basics of form validation. We’ll examine validation further in subsequent tutorials. For example:
- Reactive Form Validation
- Custom Validation
I recommend you watch the video on validation before moving one.
