Угловой путь ошибки проверки уровня группы форм

Question

Можете ли вы сказать мне на уровне группы форм, как я могу получить пароль passwordMatchValidator, пожалуйста?

HTML:

<input>*****</input>
<mat-error *ngIf="form.errors.mismatch">
mismatch error
</mat-error>

TYPESCRIPT:

const form = new FormGroup({
  password: new FormControl('', Validators.minLength(2)),
  passwordConfirm: new FormControl('', Validators.minLength(2)),
}, passwordMatchValidator);


function passwordMatchValidator(g: FormGroup) {
   return g.get('password').value === g.get('passwordConfirm').value
      ? null : {'mismatch': true};
}

Answer 1

Я полагаю, что вы забыли добавить "this" (это часть класса Component, не так ли?):

const form = new FormGroup({
  password: new FormControl('', Validators.minLength(2)),
  passwordConfirm: new FormControl('', Validators.minLength(2)),
}, this.passwordMatchValidator);

Answer 2

Я проверил пароль и подтвердил пароль на основе типа подтверждения пароля ...

HTML file ...

<div class="form-group">
  <input type="password" formControlName="password" class="form-control input-underline input-lg" id="password" placeholder="Password">
</div>
<div class="form-group">
  <input type="password" formControlName="confirmPassword" class="form-control input-underline input-lg" id="confirmPassword" (input)="checkPassword()" placeholder="Repeat Password">
</div>                    

<div *ngIf="passwordNotMatched">Password and confirmPassword is not matched</div>

In .ts file ...

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

constructor(private formBuilder: FormBuilder) {}

ngOnInit() {
    this.registerForm = this.formBuilder.group({                        
        name: ['', [Validators.required]],
        email: ['', [Validators.required]],
        password: ['', [Validators.required, Validators.minLength(3)]],
        confirmPassword: ['', [Validators.required, Validators.minLength(3)]]
    });
}

get f() { return this.registerForm.controls; }

checkPassword(){
    console.log("Password : ",this.registerForm.value.password);
    console.log("Conform : " , this.registerForm.value.confirmPassword);
    if(this.registerForm.value.password == this.registerForm.value.confirmPassword){
       this.passwordNotMatched = false; 
    }else{
        this.passwordNotMatched = true;
    }        
}

Пока пароль не совпадает ...

Когда пароль совпадает ...

Для установки в <mat-error>:

<div class="example-container">
   <mat-form-field>
     <input type="password" formControlName="confirmPassword" class="form-control input-underline input-lg" id="confirmPassword" (input)="checkPassword()" placeholder="Repeat Password">
     <mat-error *ngIf="passwordNotMatched">Password and confirmPassword is not matched</mat-error>
   </mat-form-field>
 </div>

Примечание. Приведенный выше код <mat-error> приведен только для справки. Это непроверенный код из-за неинсталляции материала в моем проекте.