Form Validation in Angular – Step by Step Explanation

This simple article explains form validation in Angular. You’ll also learn how to display messages to the user based on validation errors.

This tutorial would be step by step.

1. About HTML Form Validation
2. Setup the Form
3. Submit Function
4. Validation Styles
5. Validation Messages
6. More on Validation

1. Native HTML Form Validation

Without Angular, we have a native HTML form validation. You can decide to use in your angular application. One benefit is that it is very easy to use.

To use the native HTML form validation, just include ngNativeValidation to the form tag. Then any validation markup would be handled. For example including required to the input would cause a required field validation.

2. Set up Your Form

I have setup a basic html form. This is shown below.

<form #f="ngForm" (ngSubmit)="onSubmit(f)">
  <div class="form-group">
    <label>Firstname</label>
    <div class="input-group">
      <input class="form-control" name="firstname" required>
    </div>
  </div>
  <div class="form-group">
    <label>Lastname</label>
    <div class="input-group">
      <input name="lastname" class="form-control" ngModel />
    </div>
  </div>
  <div class="form-group">
    <label >Department</label>
    <div class="input-group">
      <input name="department" class="form-control" ngModel>
    </div>
  </div>
  <div class="form-group">
    <label>Email</label>
    <div class="input-group">
      <input name="email" class="form-control" ngModel>
    </div>
  </div>
  <div class="form-group">
    <label for="country">Country</label>
    <div class="input-group">
      <select id="country" name="country" class="form-control" ngModel>
        <option *ngFor="let country of countries" value={{country}}>
          {{country}}
        </option>
      </select>
    </div>
  </div>
  <div class="border text-center">
    <button type="submit" data-dismiss="modal" class="btn btn-info">Submit</button>
  </div>
</form>
</div>

Note the tree attributes for each control. For firstname, for instance:

• name = “firstname” – requirement for using ngModel
• NgModel – creates a binding with the model
• #firstname = ngModel : helps us get the value of the particular control

Like this

name="firstname" #firstname="ngModel" ngModel

Do this for all the other controls.

Note: It’s easy to confuse NgModel with ngModel. So beware!

3. Write the Submit function

Unlike native html validation, the Angular validation would execute the submit function regardless of whether the form entries are valid or not. However, you can easily check the form for validity before executing the actual submit code.

The onSubmit() function below does this.

  onSubmit(f: NgForm) {
   if (f.valid) {
     this.message = 'The form is VALID';
   }
   if (f.invalid){
     this.message = 'The form is INVALID';
   }
  }

4. Valid and Invalid Styles

Now we would like to add a style for the inputs based on if it is valid. This style is shown below. But you can modify it as you wish.

input.ng-invalid{
  border-left: 5px solid red;
}

input.ng-valid{
  border-left: 5px solid green;
}

So now, if you test out the application, you’ll see that if the field are empty, invalid style is applied. And vice versa.

5. Validation Messages

Now we would like to display validation message if an invalid input is detected.

You can add  a message for each control. Or you can add a general message for all the controls.

So go ahead to add a <span></span> tag after the firstname. Give this a class, say, error.

<span *ngIf="firstname.invalid" class="error">You must enter firstname</span>

Then define the error class.

.error{
  color: red;
}

Touched and Untouched

To prevent display of the error message when page reload, add this condition to the *ngIf:

*ngIf="firstname.invalid && firstname.touched"

6. More on Validation

I’ll like to cover more on validation in the next tutorial. We would learn things like:

• setting the minimum and maximum value of an input value
• type of values. For instance, numbers, letters, uppercase, lowercase etc
• email validation
• password validation
• validation for Reactive Forms

I recommend you watch the video lesson in my YouTube Channel. It may be clearer for you there. Also remember to subscribe!