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

Question

我正在尝试使用 *ngFor 对数组中的对象设置表单控制。根据用户的不同，有时我会在数组中有 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。我们 set/unset 验证器，我们还需要在这里使用 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 以外的其他内容，该表单现在将被视为有效（如果其他字段有效），即使该表单中没有任何值名称为 Multiply Average.

的控件

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

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

How to set formControlNames using *ngFor in Angular?

typescript

ngfor

angular-material2

angular