Angular Reactive forms with Custom Validators

01.ts

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


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


@NgModule({
	declarations: [
		AppComponent
	],
	imports: [
		BrowserModule,
		ReactiveFormsModule
	],
	providers: [],
	bootstrap: [AppComponent]
})
export class AppModule { }

02.ts

import { Component, OnInit } from '@angular/core';
import { User } from './shared/models/user.model';
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';

@Component({
	selector: 'app-root',
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
	userToSave: User;
	registrationForm: FormGroup;

	constructor(private fb: FormBuilder) {
	}

	ngOnInit() {
		this.createForm();
	}

	createForm() {
		this.registrationForm = this.fb.group({
			userId: ['', Validators.compose([Validators.required, Validators.minLength(6), Validators.maxLength(50)])],
			email: ['', Validators.compose([
				Validators.required,
				Validators.maxLength(50),
				Validators.pattern(/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/)])],
			name: ['', Validators.compose([Validators.required, Validators.minLength(2), Validators.maxLength(100)])],
			passwords: this.fb.group({
				password: ['', [Validators.required, Validators.maxLength(30), Validators.minLength(6)]],
				passwordConfirmation: ''
			},
			{validator: this.checkPasswords})
		});
	}

	checkPasswords(group: FormGroup) {
		const password = <FormControl>group.get('password');
		const confirmPassword = <FormControl>group.get('passwordConfirmation');

		return password.value === confirmPassword.value ? null : { 'mismatch': true };
	}

	onSubmit() {
	}

	get userId() { return this.registrationForm.get('userId'); }
	get email() { return this.registrationForm.get('email'); }
	get name() { return this.registrationForm.get('name'); }
	get passwords() { return this.registrationForm.get('passwords'); }
	get password() { return this.passwords.get('password'); }
	get passwordConfirmation() { return this.passwords.get('passwordConfirmation'); }
}

03.html

<div class="row">
	<div class="col-md-4 col-md-offset-4">
		<h2>Registration Form</h2>
		<form [formGroup]="registrationForm">
			<div class="form-group">
				<label class="center-block">User Id:
					<input class="form-control" formControlName="userId">
					<div *ngIf="userId.invalid && (userId.dirty || userId.touched)" class="alert alert-danger">
						<div *ngIf="userId.errors.required">
							User Id is required.
						</div>
						<div *ngIf="userId.errors.minlength">
							Name must be at least 6 characters long.
						</div>
						<div *ngIf="userId.errors.maxLength">
							Name cannot exceed from 50 characters long.
						</div>
					</div>
				</label>
			</div>
			<div class="form-group">
				<label class="center-block">Email:
					<input class="form-control" formControlName="email">
					<div *ngIf="email.invalid && (email.dirty || email.touched)" class="alert alert-danger">
						<div *ngIf="email.errors.required">
							Email address is required.
						</div>
						<div *ngIf="email.errors.pattern">
							Email address is not valid.
						</div>
						<div *ngIf="email.errors.maxLength">
							Email cannot exceed from 50 characters long.
						</div>
					</div>
				</label>
			</div>
			<div class="form-group">
				<label class="center-block">Name:
					<input class="form-control" formControlName="name">
					<div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert alert-danger">
						<div *ngIf="name.errors.required">
							Name is required.
						</div>
						<div *ngIf="name.errors.minlength">
							Name must be at least 2 characters long.
						</div>
						<div *ngIf="name.errors.maxLength">
							Name cannot exceed from 100 characters long.
						</div>
					</div>
				</label>
			</div>
			<div formGroupName="passwords">
				<div class="form-group">
					<label class="center-block">Password:
						<input type="password" class="form-control" formControlName="password">
						<div *ngIf="password.invalid && (password.dirty || password.touched)" class="alert alert-danger">
							<div *ngIf="password.errors.required">
								Password is required.
							</div>
							<div *ngIf="password.errors.minlength">
								Password must be at least 6 characters long.
							</div>
							<div *ngIf="password.errors.maxLength">
								Password cannot exceed from 30 characters long.
							</div>
						</div>
					</label>
				</div>
				<div class="form-group">
					<label class="center-block">Confirmation:
						<input type="password" class="form-control" formControlName="passwordConfirmation">
						<div *ngIf="passwords.invalid && (passwordConfirmation.dirty || passwordConfirmation.touched)"
						 class="alert alert-danger">
							<div *ngIf="passwords.errors.mismatch">
								The confirmation does not match with the password.
							</div>
						</div>
					</label>
				</div>
			</div>
			<input type="submit" value="Confirm" class="btn btn-primary" [disabled]="registrationForm.invalid">
		</form>
	</div>
</div>

04.ts

import { Injectable } from '@angular/core';

@Injectable()
export class User {
	userId: string;
	email: string;
	name: string;
	password: string;
}

05.ts

import { ValidatorFn, FormControl, AbstractControl } from '@angular/forms';

export function checkPasswords(): ValidatorFn {
	return (control: AbstractControl): {[key: string]: any} => {
		const password = <FormControl>control.get('password');
		const passwordConfirmation = <FormControl>control.get('passwordConfirmation');

		return password.value === passwordConfirmation.value ? null : { 'mismatch': true };
	};
}