ngControl与ngFor在Angular2

2016-02-26 68 views 5 likes

Q1。是否有可能有一个控制即：ngControl与ngFor在Angular2

ValidNumber = new Control('', CustomValidators.number({min:1, max:10}))

验证所有同类型的模板input领域的？

Q2。可这些字段由ngFor生成？

FailedMethod 1：验证工作，但值耦合。

<input [ngFormControl]="ValidNumber" name="num1" type="number"/> 
<input [ngFormControl]="ValidNumber" name="num2" type="number"/>

FailedMethod 2：随着formBuilder它是与上述相同。

<form [ngFormModel]="formBuiltWithFormBuilder"> 
    <input ngControl="ValidNumber" name="num1" type="number"/> 
    <input ngControl="ValidNumber" name="num2" type="number"/> 
</from>

目的澄清：

我试图确认可能与ngFor 生成，并且需要类似的验证表单字段。
没有定义重复其他地方的类似控制。
值我可以像#form="ngForm"或ngModel任何其他方法提取，都是我从ngControl要的就是验证。

来源

2016-02-26 Ankit Singh

回答

您也可以生成控件，然后没有问题。

@Component({ 
    ... 
    template: ` 
... 
<input *ngFor="let c in controls" [ngFormControl]="c" name="c.name" type="number"/> 
... 
` 
}) 
class MyComponent { 
    // initialization with `['a', 'b', 'c']` just for demo purposes 
    // these values probably come from outside - hence @Input() 
    @Input() controlNames:string[] = ['a', 'b', 'c']; 

    controls: Control[]; 

    ngOnInit() { 
    this.controlNames.forEach(
     v => this.controls.push(
      new Control('', CustomValidators.number{min:1, max:10}) 
     ) 
    ); 
    } 
}

（代码未测试）

controls需要被当controlNames变化更新。 ngOnInit()只运行一次。

来源

2016-02-26 13:15:12

这是令人高兴的眼睛，我也编码这样的事'mentally'，但我也想不环路以外的其他地方模板的ngFor等，这就是真正的挑战在于，我认为。 –

您可以将代码'ValidNumber =新的控制（ ''，CustomValidators.number（{分钟：1，最大：10}））'成指令，那么你可以使用theh'* ngFor'迭代，并且不需要另一个在你的代码中。 –

对于Angular2（2.2.x的）的当前版本中，控制应FormControl和[ngFormControl]应该[formControl] – isevcik

ngControl与ngFor在Angular2

回答

相关问题