Angular2 中的 ngControl 和 ngFor

Question

Q1.是否可以有一个Control 即：

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>

Objective 说明：

我正在尝试验证可能由 ngFor 生成的表单字段并需要类似的验证。
无需在其他地方重复定义类似控件。
我可以使用 #form="ngForm" 或 ngModel 等任何其他方法提取的值，我想要的 ngControl 只是验证。

Answer 1

你也可以生成控件就没有问题了。

@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() 只运行一次。

Angular2 中的 ngControl 和 ngFor

ngControl with ngFor in Angular2

typescript

angular2-forms

angular