Angular 5 Registration Form using FormsModule

email.directive.ts

import {
    ReactiveFormsModule,
    NG_VALIDATORS,
    FormsModule,
    FormGroup,
    FormControl,
    ValidatorFn,
    Validator
} from '@angular/forms';
import { Directive } from '@angular/core';
@Directive({
    selector: '[emailvalidator][ngModel]',
    providers: [
        {
            provide: NG_VALIDATORS,
            useExisting: EmailValidator,
            multi: true
        }
    ]
})
export class EmailValidator implements Validator {
    validator: ValidatorFn;
    constructor() {
        this.validator = this.emailValidator();
    }
    validate(c: FormControl) {
        return this.validator(c);
    }

    emailValidator(): ValidatorFn {
        return (c: FormControl) => {
            const isValid = /^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/.test(c.value);
            if (isValid) {
                return null;
            } else {
                return {
                    emailvalidator: {
                        valid: false
                    }
                };
            }
        };
    }
}

signup-form.component.html

<form #f="ngForm" (ngSubmit)="submit()">
    <div class="form-group">
        <label>Username</label>
        <input type="text" name="username" class="form-control" [(ngModel)]="user.username" required #username="ngModel">
        <div *ngIf="username.errors && (username.dirty || username.touched)">
            <div *ngIf="username.errors.required || (username.pristine && !f.submitted)" class="form-error form-username-error">Username is required</div>
        </div>
    </div>
    <div class="form-group">
        <label>Email</label>
        <input type="email" name="email" class="form-control" [(ngModel)]="user.email" required emailvalidator #email="ngModel">
        <div *ngIf="email.errors && (email.dirty || email.touched)">
            <div *ngIf="email.errors.required || (email.pristine && !f.submitted)" class="form-error form-email-error"> Email is required</div>
            <div *ngIf="email.errors.emailvalidator" class="form-error form-email-error"> This is not correct email</div>
        </div>
    </div>
    <div class="form-group">
        <label>Password</label>
        <input type="password" name="password" class="form-control" [(ngModel)]="user.password" required reverse="true" validateEqual="password_match"
            pattern="((?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,30})" #password="ngModel">
        <div *ngIf="password.errors && (password.dirty || password.touched)">
            <div *ngIf="password.errors.required" class="form-error form-password-error">Password is required</div>
            <div *ngIf="password.errors.pattern" class="form-error form-password-error"> Password should have at least 8 characters including one uppercase, one lowercase and one number</div>
            <div *ngIf="password.errors.validateEqual" class="form-error form-password-error">Passwords should match</div>
        </div>
    </div>
    <div class="form-group">
        <label>Repeat Password</label>
        <input type="password" name="password_match" class="form-control" [(ngModel)]="user.password_match" required validateEqual="password"
            #confirmPassword="ngModel">
        <div *ngIf="confirmPassword.errors && (confirmPassword.dirty || confirmPassword.touched)">
            <div *ngIf="confirmPassword.errors.required" class="form-error form-password_match-error">Password match is required</div>
            <div *ngIf="confirmPassword.errors.validateEqual" class="form-error form-password_match-error">Passwords should match</div>
        </div>
    </div>
    <div class="form-group">
        <input type="submit" class="btn btn-default btn-block" value="Signup" [disabled]="!f.form.valid">
    </div>
</form>

validateEqual.directive.ts

import { Directive, forwardRef, Attribute, OnDestroy, Input } from '@angular/core';
import { Validator, AbstractControl, NG_VALIDATORS } from '@angular/forms';

@Directive({
    selector: '[validateEqual][formControlName],[validateEqual][formControl],[validateEqual][ngModel]',
    providers: [
        { provide: NG_VALIDATORS, useExisting: forwardRef(() => FieldmatchesDirective), multi: true }
    ]
})
export class FieldmatchesDirective implements Validator {

    constructor(
        @Attribute('validateEqual') public validateEqual: string,
        @Attribute('reverse') public reverse: string) { }

    private get isReverse() {
        if (!this.reverse) { return false; }
        return this.reverse === 'true' ? true : false;
    }

    validate(c: AbstractControl): { [key: string]: any } {
        // self value
        const v = c.value;

        // control vlaue
        const e = c.root.get(this.validateEqual);

        // value not equal
        if (e && v !== e.value && !this.isReverse) {
            return {
                validateEqual: { valid: false }
            };
        }

        // value equal and reverse
        if (e && v === e.value && this.isReverse) {
            delete e.errors['validateEqual'];
            if (!Object.keys(e.errors).length) { e.setErrors(null); }
        }

        // value not equal and reverse
        if (e && v !== e.value && this.isReverse) {

            e.setErrors({ validateEqual: { valid: false } });
        }

        return null;
    }
}