密码比较指令@input在角度模板驱动的形式中总是未定义的

Question

嗨，我正试图创建一个角度指令来比较密码和确认密码。我尝试了网上展示的许多示例，但似乎都不起作用，在验证函数中，@input值总是未定义的，哪里会出错

以下是我的模板代码

<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

它打印未定义，因为您告诉Angular通过useClass:为验证器创建一个新的ValidateEqualDirective实例

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

这意味着您有两个类实例：第一个绑定到html结构，第二个创建用于验证。

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

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