Angular 8 - Reactive Forms Validation Example

Angular 8 - Reactive Forms Validation Example

In this tutorial, learn how to easily create a registration form with reactive form validation using Angular 8 and Kendo UI for Angular.

This is a quick example of how to set up form validation in Angular 8 with Kendo UI components and Reactive Forms. The example is a simple registration form with pretty standard fields for title, first name, last name, email, password, confirm password and an accept Ts & Cs switch control. All fields are required, including the switch control. The email field must be a valid email address and the password field must have a mininimum length of 6 characters. There’s also a custom validator called MustMatch, which is used to validate that the password and confirm password fields match.

I’ve set up the form validation messages to display when the user attempts to submit the form. This is implemented with a submitted property in the app component that is set to true when the form is submitted, and reset to false if the cancel button is clicked.

The following Kendo UI components are used in the form:

  • kendo-dropdownlist is used for the Title field
  • kendoTextBox is used for the First Name, Last Name and Email fields
  • kendoTextBox with type="password" is used for the Password and Confirm Password fields
  • kendo-switch is used for the Accept Ts & Cs field
  • kendoButton is used for the Register and Cancel buttons

For more info about all components available in the Kendo UI for Angular library, see the docs and demos here.

Styling of the example is done with Bootstrap 4.3, the Kendo UI for Angular Default Theme, and a few custom CSS styles in the main index.html file. For more info on styling Kendo UI components for Angular, see this styling overview.

Here it is in action:

(See on StackBlitz at https://stackblitz.com/edit/angular-8-kendo-ui-reactive-form-validation)

Angular + Kendo UI App Component

The app component defines the form fields and validators for our registration form using an Angular FormBuilder to create an instance of a FormGroup that is stored in the registerForm property. The registerForm is then bound to the form in the app template below using the [formGroup] directive.

The titles array is bound to the kendo-dropdownlist in the app component template with the [data]="titles" property.

I also added a getter f as a convenience property to make it easier to access form controls from the template. So for example you can access the confirmPassword field in the template using f.confirmPassword instead of registerForm.controls.confirmPassword.

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

// import custom validator to validate that password and confirm password fields match
import { MustMatch } from './_helpers/must-match.validator';

@Component({ selector: 'app', templateUrl: 'app.component.html' })
export class AppComponent implements OnInit {
    registerForm: FormGroup;
    submitted = false;
    titles = ['Mr', 'Mrs', 'Miss', 'Ms'];

    constructor(private formBuilder: FormBuilder) { }

    ngOnInit() {
        this.registerForm = this.formBuilder.group({
            title: ['', Validators.required],
            firstName: ['', Validators.required],
            lastName: ['', Validators.required],
            email: ['', [Validators.required, Validators.email]],
            password: ['', [Validators.required, Validators.minLength(6)]],
            confirmPassword: ['', Validators.required],
            acceptTerms: [false, Validators.requiredTrue]
        }, {
            validator: MustMatch('password', 'confirmPassword')
        });
    }

    // convenience getter for easy access to form fields
    get f() { return this.registerForm.controls; }

    onSubmit() {
        this.submitted = true;

        // stop here if form is invalid
        if (this.registerForm.invalid) {
            return;
        }

        // display form values on success
        alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.registerForm.value, null, 4));
    }

    onReset() {
        this.submitted = false;
        this.registerForm.reset();
    }
}

Angular + Kendo UI App Component Template

The app component template contains all the HTML markup and Angular template syntax for displaying the example registration form in your browser. The form element uses the [formGroup] directive to bind to the registerForm FormGroup in the app component above.

The form binds the form submit event to the onSubmit() handler in the app component using the Angular event binding (ngSubmit)="onSubmit()". Validation messages are displayed only after the user attempts to submit the form for the first time; this is controlled with the submitted property of the app component.

The cancel button click event is bound to the onReset() handler in the app component using the Angular event binding (click)="onReset()".

<!-- main app container -->
<div class="card m-3">
    <h5 class="card-header">Angular 8 + Kendo UI - Reactive Form Validation</h5>
    <div class="card-body">
        <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
            <div class="form-row">
                <div class="form-group col">
                    <label>Title</label>
                    <kendo-dropdownlist formControlName="title" [data]="titles" class="form-control" [ngClass]="{ 'ng-invalid ng-touched': submitted && f.title.errors }">
                    </kendo-dropdownlist>
                    <div *ngIf="submitted && f.title.errors" class="k-tooltip-validation">
                        <div *ngIf="f.title.errors.required">Title is required</div>
                    </div>
                </div>
                <div class="form-group col-5">
                    <label>First Name</label>
                    <input kendoTextBox formControlName="firstName" class="form-control" [ngClass]="{ 'ng-invalid ng-touched': submitted && f.firstName.errors }" />
                    <div *ngIf="submitted && f.firstName.errors" class="k-tooltip-validation">
                        <div *ngIf="f.firstName.errors.required">First Name is required</div>
                    </div>
                </div>
                <div class="form-group col-5">
                    <label>Last Name</label>
                    <input kendoTextBox formControlName="lastName" class="form-control" [ngClass]="{ 'ng-invalid ng-touched': submitted && f.lastName.errors }" />
                    <div *ngIf="submitted && f.lastName.errors" class="k-tooltip-validation">
                        <div *ngIf="f.lastName.errors.required">Last Name is required</div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label>Email</label>
                <input kendoTextBox formControlName="email" class="form-control" [ngClass]="{ 'ng-invalid ng-touched': submitted && f.email.errors }" />
                <div *ngIf="submitted && f.email.errors" class="k-tooltip-validation">
                    <div *ngIf="f.email.errors.required">Email is required</div>
                    <div *ngIf="f.email.errors.email">Email must be a valid email address</div>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col">
                    <label>Password</label>
                    <input kendoTextBox type="password" formControlName="password" class="form-control" [ngClass]="{ 'ng-invalid ng-touched': submitted && f.password.errors }" />
                    <div *ngIf="submitted && f.password.errors" class="k-tooltip-validation">
                        <div *ngIf="f.password.errors.required">Password is required</div>
                        <div *ngIf="f.password.errors.minlength">Password must be at least 6 characters</div>
                    </div>
                </div>
                <div class="form-group col">
                    <label>Confirm Password</label>
                    <input kendoTextBox type="password" formControlName="confirmPassword" class="form-control" [ngClass]="{ 'ng-invalid ng-touched': submitted && f.confirmPassword.errors }" />
                    <div *ngIf="submitted && f.confirmPassword.errors" class="k-tooltip-validation">
                        <div *ngIf="f.confirmPassword.errors.required">Confirm Password is required</div>
                        <div *ngIf="f.confirmPassword.errors.mustMatch">Passwords must match</div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <kendo-switch formControlName="acceptTerms" onLabel="Yes"
          offLabel="No"></kendo-switch>
                <label>Accept Terms & Conditions</label>
                <div *ngIf="submitted && f.acceptTerms.errors" class="k-tooltip-validation">Accept Ts & Cs is required</div>
            </div>
            <div class="text-center">
                <button kendoButton primary="true" class="mr-2">Register</button>
                <button kendoButton type="reset" (click)="onReset()">Cancel</button>
            </div>
        </form>
    </div>
</div>

Reactive Forms Custom “Must Match” Validator

The custom MustMatch validator is used in this example to verify that both of the password fields (password and confirmPassword) match. It could also be used to verify that any pair of fields match (e.g. email and confirm email fields).

It works slightly differently than a typical custom validator because I’m setting the error on the second field instead of returning it to be set on the formGroup. I did it this way because I think it makes the template a bit cleaner and more intuitive. The mustMatchvalidation error is displayed below the confirmPassword field, so I think it makes sense that the error is attached the the confirmPassword form control.

import { FormGroup } from '@angular/forms';

// custom validator to check that two fields match
export function MustMatch(controlName: string, matchingControlName: string) {
    return (formGroup: FormGroup) => {
        const control = formGroup.controls[controlName];
        const matchingControl = formGroup.controls[matchingControlName];

        if (matchingControl.errors && !matchingControl.errors.mustMatch) {
            // return if another validator has already found an error on the matchingControl
            return;
        }

        // set error on matchingControl if validation fails
        if (control.value !== matchingControl.value) {
            matchingControl.setErrors({ mustMatch: true });
        } else {
            matchingControl.setErrors(null);
        }
    }
}

Angular + Kendo UI App Module

There isn’t much going on in the app module other than the standard stuff. The main thing you need to remember for using reactive forms in Angular is to import the ReactiveFormsModule from '@angular/forms' and include it in the imports array of the @NgModule decorator.

To use Kendo UI components for Angular, import the modules that contain the components you want to use and include them in the imports array of the @NgModuledecorator. The example uses Kendo UI components from the InputsModuleDropDownsModule and ButtonsModule.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { InputsModule } from '@progress/kendo-angular-inputs';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { ButtonsModule } from '@progress/kendo-angular-buttons';

import { AppComponent } from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        ReactiveFormsModule,
        BrowserAnimationsModule,
        InputsModule,
        DropDownsModule,
        ButtonsModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Further reading:

Real Time Apps with TypeScript: Integrating Web Sockets, Node & Angular

Angular vs React vs Vue: Which is the Best Choice for 2019?

A comparison between Angular and React

Getting Started with Nx in Angular

Learn Angular 8 from Scratch for Beginners

How to create a registration form using Angular 8 and Kendo UI

Top 15 Programming Languages by Popularity (2004-2019)

angular javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

How to Build an Angular Application with Angular CLI

How to set up the Angular CLI and generate a Trivial App

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

Angular Sass: How To Use Sass In Angular 9 Tutorial

Sass in Angular is an extension of CSS that allows you to use things like variables, nested rules, inline imports. Angular supports Sass, CSS, and Less.