typescript – 在Angular2中使用ngFor的ngControl

发布时间：2020-12-17 10:23:23 所属栏目：安全来源：网络整理

导读：Q1.是否可以有一个控件即： ValidNumber = new Control('',CustomValidators.number({min:1,max:10})) 验证模板中所有类似类型的输入字段？ Q2.这些字段可以由ngFor生成吗？ FailedMethod 1：验证有效但值已耦合. input [ngFormControl]="ValidNumber" name

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!