密码比较指令@input 在 angular 模板驱动形式中始终未定义

Question

嗨，我正在尝试创建一个 angular 指令来比较密码和确认密码我尝试了网上显示的许多示例，但似乎没有一个有效，@input 值在验证 function 时始终未定义，我哪里会出错

下面是我的模板代码

<div>
  <h1>Add user</h1>
  <form #f="ngForm" novalidate>
  
  <div>
    <label>Password</label>
    <input type="password" name="password" [ngModel]="user.password" 
      required #password="ngModel">
    <small [hidden]="password.valid || (password.pristine &&    
      !f.submitted)">
      Password is required
    </small>
 </div>
 <div>
    <label>Retype password</label>
    <input type="password" name="confirmPassword"    
      [ngModel]="user.confirmPassword"
      required compare="password" #confirmPassword="ngModel">
    <small [hidden]="confirmPassword.valid ||  
      (confirmPassword.pristine && !f.submitted)">
      Password mismatch
    </small>
 </div>
  </form>
 </div>

指令代码如下

import { Directive, Input, OnInit } from '@angular/core';
import {NG_VALIDATORS,AbstractControl,ValidationErrors,Validator} from '@angular/forms'
@Directive({
  selector: '[compare]',
  providers:[{provide:NG_VALIDATORS,useClass:ValidateEqualDirective,multi:true}]
})
export class ValidateEqualDirective implements Validator,OnInit {
  @Input('compare') controlToCompare;
  public controlCompate
  constructor() { }

  ngOnInit(){
    console.log(this.controlToCompare)
  }
  validate(val:AbstractControl):ValidationErrors|null{

    console.log(this.controlToCompare);
    return null;
  }

}

Answer 1

它打印 undefined 因为您告诉 Angular 通过useClass为验证器创建一个新的 ValidateEqualDirective 实例：

providers:[{provide:NG_VALIDATORS, useClass:ValidateEqualDirective
                                   ^^^^

这意味着您有两个 class 实例：第一个与 html 结构相关联，第二个是为验证而创建的。

您应该改用相同的指令实例：

providers:[{provide:NG_VALIDATORS, useExisting: ValidateEqualDirective
                                  ^^^^^^^^^^^^^^^
                             reuse current directive instance