To perform cross field validation(confirm password) using material components.

See more:

Typescript

Angular6

I have created a component(set-pass),I want to perform password and confirm password activities in this component.I have tried it by creating a custom directive(confirm-equal-validator.directive.ts) inside shared folder.

Below are my component files

set-pass.component.html

<form >
     <mat-form-field >
       <input matInput name="password" placeholder="New password" [type]="hide ? 'password' : 'text'" [formControl]="passFormControl" required>

       <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
       <mat-error *ngIf="passFormControl.hasError('required')">
           Please enter your newpassword
         </mat-error>
     </mat-form-field>

     <mat-form-field >
       <input matInput name="confirmPassword"  appConfirmEqualValidator="password"  placeholder="Confirm password" [type]="hide ? 'password' : 'text'" [formControl]="confirmFormControl" #confirmPasswordControl="ngModel" required>

       <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
       <mat-error *ngIf="confirmFormControl.hasError('required')">
         Confirm your password
         </mat-error>
         <mat-error *ngIf="confirmFormControl.hasError('notEqual')">
           Confirm your password
           </mat-error>
     </mat-form-field>
  </form>

set-pass.component.ts

import {Component, OnInit } from '@angular/core';
    import {FormControl, FormGroupDirective, NgForm, Validators} from 
         '@angular/forms';
    import {ErrorStateMatcher} from '@angular/material/core';

     @Component({
       selector: 'ylb-set-pass',
       templateUrl: './set-pass.component.html',
       styleUrls: ['./set-pass.component.css']
       })
     export class SetPassComponent {

        passFormControl = new FormControl('', [
        Validators.required,
         ]);
           confirmFormControl = new FormControl('', [
          Validators.required,
        ]);
   }

2

What I have tried:

<pre lang="text">
import { Validator,AbstractControl,NG_VALIDATORS } from '@angular/forms';
    import { Directive,Input} from '@angular/core';



    @Directive({
       selector: '[appConfirmEqualValidator]',
       providers: [{
            provide: NG_VALIDATORS,
            useExisting: ConfirmEqualValidatorDirective ,
            multi:true
        }]
     })

   export class ConfirmEqualValidatorDirective implements Validator{
     @Input() appConfirmEqualValidator:string;
      validate(control: AbstractControl):{[key:string]:any} | null{
        const controlToCompare = 
    control.parent.get(this.appConfirmEqualValidator);
        if(controlToCompare && controlToCompare.value !== control.value){
           return{'notEqual':true};
         }
         return null;
       }
     }

I have imported this component in app.module.ts like this

import { ConfirmEqualValidatorDirective } from './shared/confirm-equal-validator.directive';

I have followed every steps properly given in this video

https://www.youtube.com/watch?v=YhazkQd59Hk

I want to achieve confirm password through material components only, like this I want confirm password field also.But i am unable achieve confirm password and i want error text regarding password mismatch.I have many links but they are doing with bootstrap input components.I want it using materials only