Angular 10 – Form Validation

In this part, we would look at form validation. So we look at the following

  1. Native HTML validation
  2. Template-Driven Form Validation
  3. Displaying Error Messages

 

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

Angular Form Validation

Angular Form Validation

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.