微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐