如何在 Angular 中使用 *ngFor 设置 formControlNames？

Question

我正在尝试使用*ngFor 对数组中的对象设置表单控制。根据用户的不同，有时我会在 Array 中有 1 个对象，但有时会有多个。

我的问题是我想使用循环创建一个formControlName，但我不确定如何在组件中设置表单组验证器？像下面这样设置它们意味着如果只有 1 个对象，则表单在查找另一个不存在的 formControlName 时仍然无效。

因此，如果名称为“Days”的第一个对象不在列表中，“Days”仍会在 this.form 中并显示在控件中：

数组：

indicators = [
  {name:"Days",data:[250,1]},
  {name:"Multiply Average",data:[3,.25,1]}
],

组件：

ngOnInit() {
    this.form = this._fb.group({
            "Multiply Average":['', Validators.compose([
                Validators.required
                ])],
            "Days":['', Validators.compose([
                Validators.required
                ])],
        });  
    };

模板：

  <span
     *ngFor="let i of indicators">
          {{i.name}}: 
          <md-slider
            formControlName={{i.name}}
            color="primary"
            [max]=i.data[0]
            [thumb-label]="true"
            [step]=i.data[1]
            [min]=i.data[2]>
          </md-slider>
  </span>

任何帮助都会很棒

Answer 1

确保您的form 标签上有[formGroup]="form"。

为了使其更详细，使用属性绑定而不是对formControlName 属性进行插值

[formControlName]="i.name"

Answer 2

您需要的是条件验证。根据选择，您需要设置所需的验证器，或者然后删除它们。这是一个非常简单的例子，可以给你一个想法，如果你有更多的字段，更多的验证等，我建议你看看这个："How to implement conditional validation in Angular model-driven forms"

有一个通过表单控件进行迭代并使整个事情更加动态的示例，但想法与以下相同。

我们可以在用户在md-select 中做出选择时设置更改事件。你当然也可以使用valueChanges，但我喜欢一个简单的更改事件：

<md-select
  formControlName="indicator1"
  (change)="checkValue(form.get('indicator1'))">
  <md-option
      *ngFor="let indicator of indicators['indicatorlist']" 
       [value]="indicator">
       {{indicator}}
  </md-option>   
</md-select>

我们传递表单控件，以便我们可以将它与应该删除的验证器的值进行比较，以防它不匹配，在这种情况下，我们想要删除验证器是不是Above WMA - Volume Price。我们设置/取消设置验证器，我们还需要在这里使用updateValueAndValidity()：

checkValue(ctrl) {
  if(ctrl.value != "Above WMA - Volume Price") {
    this.form.get('Multiply Average').setValidators(null);
    this.form.get('Multiply Average').updateValueAndValidity();
  } else {
    this.form.get('Multiply Average').setValidators(Validators.required);
    this.form.get('Multiply Average').updateValueAndValidity();
  }
}

你也可以使用clearValidators()代替setValidators(null)

如前所述，这是一个非常粗略的示例，仅供您参考。

现在在 plunker 中，如果您从下拉列表中选择 Above WMA - Volume Price 以外的其他内容，则该表单现在将被视为有效（如果其他字段有效），即使该表单控件中没有名称为 @ 987654332@.

演示： https://plnkr.co/edit/h4nQfg1VYykaGgfNfnWk?p=preview