如何在 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

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

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

[formControlName]="i.name"