Validate password and confirm password Ng2

Question

Here are my codes:

<form [formGroup]="registerForm" novalidate (ngSubmit)="doRegister()">
            <div 
                class="form-group" 
                [ngClass]="{'has-danger': registerForm.controls.email.invalid 
                    && !registerForm.controls.email.pristine}">
                <label>Email</label>
                <input
                  formControlName="email"
                  name="email"
                  [ngClass]="{'form-control-danger': registerForm.controls.email.invalid 
                    && !registerForm.controls.email.pristine}"
                  class="form-control"
                  type="email" />
            </div>
            <div 
                class="form-group"
                [ngClass]="{'has-danger': registerForm.controls.password.invalid 
                    && !registerForm.controls.password.pristine}">
                <label>Password</label>
                <input
                  class="form-control"
                  type="password"
                  formControlName="password"
                  name="password"
                  [ngClass]="{'form-control-danger': registerForm.controls.password.invalid 
                    && !registerForm.controls.password.pristine}" >
            </div>
            <div 
                class="form-group"
                [ngClass]="{'has-danger': registerForm.controls.passwordConfirm.invalid}" >
                <label>Password Confirm</label>
                <input
                  [ngClass]="{'form-control-danger': registerForm.controls.passwordConfirm.invalid}"
                  class="form-control"
                  type="password"
                  formControlName="passwordConfirm"
                  name="passwordConfirm" >
            </div>
            <button [disabled]="!registerForm.valid" class="btn btn-primary" type="submit">Register</button>
        </form>

And the form init part:

this.registerForm = this.formbuilder.group({
        email: ['', Validators.compose([Validators.required, validateEmail])],
        password: ['', Validators.compose([Validators.required, Validators.minLength(5)])],
        passwordConfirm: ['', ]
    })

Now I want to validate the password and passwordConfirm field but I don't know how, I tried to created a directive but I can't pass the formcontrol directly into it. Thank you.

Edit:

<div
                class="form-group"
                [ngClass]="{'has-danger': registerForm.controls.password.invalid
                    && !registerForm.controls.password.pristine}">
                <label>Password</label>
                <input
                  formControlName="password"
                  name="password"
                  class="form-control"
                  [ngClass]="{'form-control-danger': registerForm.controls.password.invalid
                    && !registerForm.controls.password.pristine}"
                  type="password"
                  validateEqual="registerForm.controls.passwordConfirm"
                  reverse="true" >
            </div>
            <div
                class="form-group"
                [ngClass]="{'has-danger': registerForm.controls.passwordConfirm.invalid}" >
                <label>Password Confirm</label>
                <input
                  formControlName="passwordConfirm"
                  name="passwordConfirm"
                  [ngClass]="{'form-control-danger': registerForm.controls.passwordConfirm.invalid}"
                  class="form-control"
                  type="password"
                  validateEqual="registerForm.controls.password" >
            </div>

It just simply doesn't work, no error.

Answer 1

For using validateEqual directive use below HTML :

<div class="form-group" [ngClass]="{'has-danger': registerForm.controls.password.invalid && !registerForm.controls.password.pristine}">
  <label>Password</label>
  <input formControlName="password" name="password" class="form-control" type="password" [ngClass]="{'form-control-danger': registerForm.controls.password.invalid && !registerForm.controls.password.pristine}" validateEqual="passwordConfirm" reverse="true" >
</div>
<div class="form-group" [ngClass]="{'has-danger': registerForm.controls.passwordConfirm.invalid}">
    <label>Password Confirm</label>
    <input formControlName="passwordConfirm" name="passwordConfirm" [ngClass]="{'form-control-danger': registerForm.controls.passwordConfirm.invalid}" class="form-control" type="password" validateEqual="password" >
</div>