Angular 5，具有动态嵌套数组的表单构建器

Question

我有一个格式如下的表格：

  this.form = this.formBuilder.group({
      title: new FormControl('', [Validators.required, Validators.maxLength(25)]),
      description: new FormControl('', [Validators.maxLength(45)]),
      event: new FormControl('', [Validators.required]),
      properties: this.formBuilder.array([])
    });

属性数组是动态的，值始终取决于选定的事件。该数组至少可以有 3 个值，最多可以有 50 个值。每个事件都有一个唯一的名称。这就是为什么我在用下一种方式选择事件后填充这个数组：

 getValuesOfPoperty = function (prop) {
    this.selectedEventProperties = [];
    this.propertyService.getValuesOfPoperty(prop.propertyId)
      .subscribe(res => {
        this.selectedEventProperties.push({
          required: prop.required,
          name: prop.name,
          value: prop.defaultValue,
          type: res.name,
          items: res.items
        });
      })

  };

createItem(prop): FormGroup {
    return this.formBuilder.group({
      [prop.name]: prop.value
    });
  }

selectedEvent(type) {
   const temp = this.form.get('properties') as FormArray;

   type.properties.forEach(item => {
     temp.push(this.createItem(item));
     this.getValuesOfPoperty(item)
   });

   console.log(this.form.value)
 }

控制台向我展示了具有正确嵌套属性数组的适当表单对象，如下所示：

{
 title: '',
 description: '',
 event: 'auth',
 properties: [{ Date: null},
              { Login: null},
              { Result: null}]
}

但与此同时，我在控制台中收到关于每个嵌套对象的错误：

找不到带有路径的控件：'properties -> Date'

找不到带有路径的控件：'properties -> Login'

找不到带有路径的控件：'properties -> Result'

这是我的 HTML

  <form [formGroup]="form" novalidate autocomplete="off">

  <mat-form-field class="form-full-width">
                <mat-select placeholder="event"
                            required
                            formControlName="event">
                  <mat-option *ngFor="let type of events"
                              (click)="selectedEvent(type)"
                              [value]="type.name">
                    {{ type.name }}
                  </mat-option>
                </mat-select>
              </mat-form-field>

              <mat-form-field class="form-full-width">
                <input matInput
                       required
                       formControlName="title"
                       placeholder="title">
              </mat-form-field>

              <mat-form-field class="form-full-width">
                <input matInput
                       formControlName="description"
                       placeholder="description">
              </mat-form-field>

              <div *ngFor="let prop of selectedEventProperties" formArrayName="properties">

                <!-- SELECTS -->
                <mat-form-field class="form-full-width">
                  <mat-select required="{{prop.required}}"
                              formControlName="{{prop.name}}"
                              placeholder="{{prop.name}}">
                    <mat-option *ngFor="let item of prop.items"
                                [value]="prop.value">
                      {{ item.value }}
                    </mat-option>
                  </mat-select>
                </mat-form-field>
              </div>

</form

如果有人可以帮助我找出我的错误在哪里或者可以告诉我我做错了什么，我将不胜感激

提前致谢。

Answer 1

所以问题在于创建动态数组以显示选定的事件属性，因为我使用了服务，在收到实际数据之前呈现了 html，这就是我解决这个问题的方法

 getValuesOfPoperty = function (prop, temp) {
    this.selectedEventProperties = [];
    this.propertyService.getValuesOfPoperty(prop.propertyId)
      .subscribe(res => {
        // add property to dynamic array when the data has been received
        temp.push(this.createItem(prop));
        // work with an array for event properties
        this.selectedEventProperties.push({
          required: prop.required,
          name: prop.name,
          value: prop.defaultValue,
          type: res.name,
          items: res.items
        });
      })

  };

createItem(prop): FormGroup {
    return this.formBuilder.group({
      [prop.name]: prop.value
    });
  }

selectedEvent(type) {
   const temp = this.form.get('properties') as FormArray;

   type.properties.forEach(item => {
     this.getValuesOfPoperty(item, temp)
   });

   console.log(this.form.value)
 }