不能使Validator接口对模板驱动的角2自定义组件

我有银行帐户的域模型工作：不能使Validator接口对模板驱动的角2自定义组件

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

父窗体是模板驱动的，捕获的姓名和银行账户号码。为了捕获由4位数字组成的银行账号，我设法以模型驱动的方式编写了一个自定义表单控件组件。它实现了ControlValueAccessor和Validator接口，因此，在父表单上，其值/有效性完美无缺。

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

问题是：在帐户1中，它的值发送到父窗体并每次输入任何数字时都会进行验证。但在帐户2中，值正确发出但由于某种原因，validate（）方法没有被调用？

This plunker

来源

2016-09-18 bob

在你的第二个组件，您必须手动火灾propagateChange方法来调用验证。

模板

或

<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); 
}

注：我固定的错字在propogateChange方法

更新Plunker Example

见也有很大的关于它的文章：

Custom Form Controls in Angular 2

来源

2016-09-18 08:35:22 yurzui

由于它的工作原理，模板驱动的方式，似乎需要额外的而模型驱动的方式只是在做“ this.accountNumber.valueChanges.subscribe（fn）“.. – bob

是的，这行在你的第一个组件:) – yurzui

不能使Validator接口对模板驱动的角2自定义组件

回答

相关问题