在Angular2中，使用ngFor和ngControl。

Question

问题1：是否可以只使用一个控件呢？例如：

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

如何验证模板中所有类似类型的 input 字段？

Q2. 这些字段可以通过 ngFor 生成吗？

---

失败方法1： 验证有效但值是耦合在一起的。

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

失败方法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 中获取验证。

- Ankit Singh

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

- Günter Zöchbauer

---

这看起来很舒服，我也在“脑海中”编写了类似的代码，但我也试图不在模板的ngFor之外进行循环，我认为那才是真正的挑战所在。 - Ankit Singh

你可以将代码 ValidNumber = new Control('', CustomValidators.number({min:1, max:10})) 移动到一个指令中，然后你就可以使用 *ngFor 迭代而不需要在你的代码中再添加另一个。 - Günter Zöchbauer

对于当前版本的Angular2（2.2.x），Control 应该是 FormControl，而 [ngFormControl] 应该是 [formControl]。 - isevcik