trjhtr

Assuming you have an angular template form with a "password" field and a "confirm password" field (usually a register form).

Also assuming that you use two-way binding to bind the form values with the component, which is pretty common and I don't see why not.

So, the simplest, minimal, quickest way to compare the "password" and "confirm password" is to use two-way binding along with interpolation. (I am using Angular 6, but I don't think that does any major difference.)

 pass
 <input type="password" id="password" [(ngModel)]="password" name="password" #passwordvalidityMsg="ngModel" >

 pass confirm
 <input type="password" id="confPass" pattern="password" [(ngModel)]="confPass" name="confPass" #confPassvalidityMsg="ngModel" >
 <div *ngIf="confPassvalidityMsg.invalid && (confPassvalidityMsg.dirty || confPassvalidityMsg.touched)" >
 <div *ngIf="confPassvalidityMsg.errors.pattern"> not the same</div>
 </div>

Since there is two-way binding, I can get the password value and put it in the confPass pattern , and then check the pattern as with any other error.

This works for me, but, since I am an Angular newbie, please advise if there is something wrong.