Q1. 是否可以有一个控件 即:
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
中提取的值是验证。
最佳答案
你也可以生成控件那就没问题了。
@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()
只运行一次。
关于typescript - Angular2 中的 ngControl 和 ngFor,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35652576/