Angular 6验证确认密码，无需使用反应式表单

我只需要比较密码和确认密码字段。 当密码不匹配时，我需要显示消息并显示错误：密码不匹配 当显示错误时，我需要将输入字段设置为无效，从而禁用按钮

<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>
  <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>

为此，我得到一个错误：

错误：ExpressionChangedTerrithasBeenCheckedError:表达式在检查后已更改。上一个值：“ngIf:false”。当前值：“ngIf:true”

---

如何在不使用FormControl或反应式表单的情况下获得此信息。

我最近遇到了此问题，因此我创建了一个验证程序来处理此问题。注意，我依赖于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']">

---

谢谢。。。但如何使用不匹配字段显示消息

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']">

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