typescript – 在Angular2中使用ngFor的ngControl

Q1.是否可以有一个控件
即:
ValidNumber = new Control('',CustomValidators.number({min:1,max:10}))

验证模板中所有类似类型的输入字段?

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','c']; 

  controls: Control[];

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

(代码未经测试)

controlNames更改时需要更新控件. ngOnInit()只运行一次.

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...