Angular 6 Validate Confirm Password без использования реактивных форм

Question

Мне просто нужно сравнить пароль и подтвердить поля подтверждения пароля.Когда пароль не совпадает, мне нужно отобразить сообщение и показать ошибку: пароли не совпадают, а когда отображается ошибка, мне нужно установить недействительным поле ввода и, таким образом, отключить кнопку.

<form name="SignUpForm" #SignUpForm="ngForm"><br>
    <label><i class="fa fa-key"></i>
        <input type="password" name="Pwd" placeholder="Password" required pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,}"
         [(ngModel)]="SignUpNgsForm.Pwd" #Pwd="ngModel">
    </label>
        <div *ngIf="(Pwd.touched || Pwd.dirty) && Pwd.invalid" class="ErrorCls">
            <span *ngIf="Pwd.errors.required">Password is required.</span>
            <span *ngIf="Pwd.errors.pattern">Enter Strong password.</span><br>
        </div><br>

    <label><i class="fa fa-key"></i>
        <input type="password" name="RptPwd" placeholder="Repeat-Password" required pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,}"
         [(ngModel)]="SignUpNgsForm.RptPwd" #RptPwd="ngModel">
    </label>
        <div *ngIf="(RptPwd.touched || RptPwd.dirty) && RptPwd.invalid" class="ErrorCls">
            <span *ngIf="RptPwd.errors.required && RptPwd.invalid">Repeat-Password is required.</span>
            <span *ngIf="RptPwd.errors.pattern">Enter Strong password.</span>
        </div>
        <div *ngIf="(RptPwd.touched || RptPwd.dirty)" class="ErrorCls">
            <span *ngIf="!RptPwd.errors && SignUpNgsForm.Pwd != SignUpNgsForm.RptPwd">Passwords do not match</span>
        </div><br>

    <button [disabled]="!SignUpForm.form.valid" (click)="SignUp(SignUpForm)">Sign Up</button>
</form>

Также попытался:

Добавить в Component.html

<div *ngIf="(RptPwd.touched || RptPwd.dirty)" class="ErrCls">
    <span *ngIf="CheckMatchPassword(RptPwd)">Passwords do not match</span>
</div><br>

Добавить в Component.ts

CheckMatchPassword(RptPwd)
{
    if(!RptPwd.errors && this.SignUpNgsForm.Pwd != this.SignUpNgsForm.RptPwd)
    {
        return RptPwd.control.setErrors({'mismatch': true});
    }
    else
    {

        return RptPwd.control.setErrors(null);
    }
}

Для этого я получаю ошибку:

Ошибка ОШИБКИ: ExpressionChangedAfterItHasBeenCheckedError: Выражение изменилось после его проверки.Предыдущее значение: 'ngIf: false'.Текущее значение: 'ngIf: true'.

Как получить это, не используя FormControl или Reactive Forms.

Answer 1

У меня недавно была эта проблема, поэтому я создал валидатор для решения этой проблемы. Как примечание, я полагаюсь на lodash, но я просто использую его для удаления неуникальных и пустых значений

Код директивы:

import { Directive, forwardRef, Input } from '@angular/core';
import { NG_VALIDATORS, Validator, FormGroup, ValidationErrors } from '@angular/forms';
import * as _ from 'lodash';

@Directive({
  selector: '[pugMatchValidator]',
  providers: [
    { provide: NG_VALIDATORS, useExisting: forwardRef(() => MatchValidatorDirective), multi: true }
  ]
})
export class MatchValidatorDirective implements Validator {

  // an array of the names of form controls to check
  @Input('pugMatchValidator') controlsToMatch: string[];

  constructor() { }

  validate(formGroup: FormGroup): ValidationErrors | null {
    let values = [];
    if (this.controlsToMatch) {
      for (let controlName of this.controlsToMatch) {
        const control = formGroup.controls[controlName];
        if (control && (control.touched || control.dirty)) {
          values.push(control.value);
        }
      }

      // compact removes empty and null values
      // uniq gets rid of duplicate fields, so one value should remain if everything matches
      values = _.uniq(_.compact(values));

      if (values.length > 1) {
        return { unMatchedFields: true };
      }
    }
    return null;
  }

}

Далее просто передайте массив элементов управления, которые вы хотите проверить:

<form name="SignUpForm" #SignUpForm="ngForm" [pugMatchValidator]="['Pwd', 'RptPwd']">

Наконец, вы можете просто проверить, является ли ваша форма действительной или нет с помощью SignUpForm.valid

Edit: В вашем случае для отображения ошибки вы должны использовать что-то вроде этого:

<div *ngIf="SignUpForm.errors?.unMatchedFields && (RptPwd.touched || RptPwd.dirty)" class="ErrCls">
    Passwords do not match
</div>