无法使验证器界面在模板驱动的 Angular 2 自定义组件上工作

Question

我有一个银行账户的领域模型：

export interface BankAccount { acc1: string, acc2: string, acc3: string, acc4: string }

父表单是模板驱动的，捕获姓名和银行帐号。为了捕获由 4 位数字组成的银行帐号，我设法以模型驱动的方式编写了一个自定义表单控件组件。它实现了 ControlValueAccessor 和 Validator 接口，因此，在父表单上，它的 value/valid 工作完美。

现在我尝试以模板驱动的方式编写另一个银行帐户组件。到目前为止，它的 ControlValueAccessor 接口似乎可以工作，但我无法使其 Validator 接口工作。

问题是：在账户 1 中，它的值被发送到父表单并在我每次输入任何数字时都得到验证。但是在帐户 2 中，值发出正常，但出于某种原因，未调用 validate() 方法？？？

This plunker

Answer 1

在您的第二个组件中，您必须手动触发 propagateChange 方法来调用验证。

模板

<input type="text" name="acc1" [ngModel]="accountNumber.acc1"
    (ngModelChange)="change('acc1', $event)"/>

或

<input *ngFor="let prop of ['acc1', 'acc2', 'acc3', 'acc4']" type="text" 
   name="{{prop}}" [ngModel]="accountNumber[prop]" 
          (ngModelChange)="change(prop, $event)"/>

组件

change(prop, val) {
  this.accountNumber[prop] = val; 
  this.propagateChange(this.accountNumber);
}

Note: i fixed your typo in propogateChange method

已更新Plunker Example

另请参阅有关它的精彩文章：

Custom Form Controls in Angular 2

无法使验证器界面在模板驱动的 Angular 2 自定义组件上工作

Can't make Validator interface to work on template-driven Angular 2 custom component

angular2-forms

angular