首页 文章

在Angular2中使用ngFor的ngControl

提问于
浏览
5

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>

Objective Clarification:

  • 我正在尝试验证可能使用ngFor生成的表单字段,并且需要类似的验证 .

  • 没有在其他地方重复定义类似的控件 .

  • 我可以使用 #form="ngForm"ngModel 之类的任何其他方法提取的值,我想从 ngControl 获取的是验证 .

1 回答

  • 3

    您也可以生成控件然后没有问题 .

    @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})
            )
        );
      }
    }
    

    (代码未经测试)

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

相关问题