Change Password Form In Angular 2

Angular 2 doesnt having validation for checking two fields having equal values, for that we need to create custom validation.

Lets create a change password form to demonstrate the custom validation for matching new password and confirm new password.

<div class="row">
    <div class="col-md-offset-3 col-md-6">
        <div class="panel panel-default">
            <div class="panel-body">
                <h2 class="text-center">Change Password</h2>
                <form [formGroup]="changePasswordForm" (ngSubmit)="changePassword(changePasswordForm.value)">
                    <div class="form-group" [ngClass]="{'has-error':!changePasswordForm.controls['old_password'].valid && changePasswordForm.controls['old_password'].touched}">
                        <label for="old_password">Old Password</label>
                        <input type="password" name="old_password" class="form-control" id="oldPassword" placeholder="Old Password" [formControl]="changePasswordForm.controls['old_password']" />
                        <small *ngIf="changePasswordForm.controls['old_password'].hasError('required') && changePasswordForm.controls['old_password'].touched" class="text-danger">Old Password Required</small>
                    </div>
                    <div class="form-group" [ngClass]="{'has-error':!changePasswordForm.controls['new_password'].valid && changePasswordForm.controls['new_password'].touched}">
                        <label for="new_password">New Password</label>
                        <input type="password" name="new_password" class="form-control" id="newPassword" placeholder="New Password" [formControl]="changePasswordForm.controls['new_password']" />
                        <small *ngIf="changePasswordForm.controls['new_password'].hasError('required') && changePasswordForm.controls['new_password'].touched" class="text-danger">New Password Required</small>
                    </div>
                    <div class="form-group" [ngClass]="{'has-error':!changePasswordForm.controls['confirm_new_password'].valid && changePasswordForm.controls['confirm_new_password'].touched}">
                        <label for="confirm_new_password">Confirm New Password</label>
                        <input type="password" name="confirm_new_password" class="form-control" id="newPassword" placeholder="Confirm New Password" [formControl]="changePasswordForm.controls['confirm_new_password']" />
                        <small *ngIf="changePasswordForm.controls['confirm_new_password'].hasError('required') && changePasswordForm.controls['c:onfirm_new_password'].touched" class="text-danger">Confirm New Required</small>
                        <small *ngIf="changePasswordForm.controls['confirm_new_password'].hasError('passwordMatch') && changePasswordForm.controls['confirm_new_password'].touched" class="text-danger">Password mismatch</small>
                    </div>
                    <div class="form-group text-center">
                        <button type="submit" class="btn btn-default" [disabled]="!changePasswordForm.valid">Change Password</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Now, lets create a ts component for this

    import { Component } from '@angular/core';
    import { FormGroup, FormBuilder, FormControl, Validators, AbstractControl } from '@angular/forms';
    
    @Component({
      selector: 'change-password',
      templateUrl:'change-password.component.html',
      providers: [ UserService ]
    })
    
    export class ChangePasswordComponent {
    
        changePasswordForm:FormGroup;

        constructor(fb: FormBuilder){
            this.changePasswordForm = fb.group({
                'old_password': [null, Validators.required],
                'new_password': [null, Validators.required],
                'confirm_new_password': [null, [Validators.required, this.passwordMatch]] 
            });
        }
    
        passwordMatch(control: AbstractControl){
            let paswd = control.root.get('new_password');
            if(paswd && control.value != paswd.value){
             return {
                 passwordMatch: false
             };   
            }
            return null;
        }
    
        changePassword(value){
            if(this.changePasswordForm.valid){
                console.log("Change password form valid");
            }
        }
    
    }
    

Thats it, now register this component in the app module and use the selector <change-password></change-password> to see the change password form