Question

我具有以下功能，可以在我的页面之一中设置一些动态表单。

prepareClaseDispositivo() {
    this.dispositivos.forEach(dispo => {
        if (!this.labelDispositivos.includes(dispo.clase_dispositivo.nombre)) {
            this.labelDispositivos.push(dispo.clase_dispositivo.nombre);
        }
    });
    this.labelDispositivos.forEach(clase => {
        this.addDispositivos();
        const dispositivosByClase = [];
        this.dispositivos.forEach(dispo => {
            if (clase === dispo.clase_dispositivo.nombre) {
                if (this.data.dispositivos) {
                    for (const d of this.data.dispositivos) {
                        if (d.descripcion === dispo.descripcion) {
                            console.log('match found');
                            // Add elements to FormArray
                            this.dispositivosForm.push(dispo);
                            console.log('added ', dispo, ' to formarray');
                        }
                    }
                }
                dispositivosByClase.push(dispo);
            }
        });
        this.dispositivosByClases.push({ nombre: clase, dispositivos: dispositivosByClase });
        if (this.data.edit) {
            this.dispoArrayForm();
        }

    });
}

现在，'this.dispositivos'包含从数据库中检索到的数据，'dispositivoForm'旨在负责在表格中选择的所有选项。

我的问题是，如何将'dispo'的内容添加到'dispositivoForm'FormArray中？

HTML（如果需要）：

<div formArrayName="dispositivosForm">
<div *ngFor="let clase of dispositivosByClases; index as i;">
  <div [formGroupName]="i">
    <h6>{{ clase.nombre }}</h6>
      <div>
        <mat-form-field>
          <mat-label></mat-label>
          <mat-select formControlName="dispositivos" multiple>
            <mat-option *ngFor="let dispo of clase.dispositivos" [value]="dispo.id">
              {{ dispo.descripcion }}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>
  </div>
</div>

Answer 1

FormArray需要一个FormControls或FormGroups数组。尝试实现一种方法，该方法将为您生成 dispo 对象的表单组，并将其添加到表单数组中。

generateFormGroup(dispo: any) {
  return new FormGroup({
    dispositivos: new FormControl(dispo.dispositivos)
  });
}

dispositivosForm: FormArray = new FormArray([]);  // <-- instance your FormArray in the beginning of your component

prepareClaseDispositivo() {
    this.dispositivos.forEach(dispo => {
        if (!this.labelDispositivos.includes(dispo.clase_dispositivo.nombre)) {
            this.labelDispositivos.push(dispo.clase_dispositivo.nombre);
        }
    });
    this.labelDispositivos.forEach(clase => {
        this.addDispositivos();
        const dispositivosByClase = [];
        this.dispositivos.forEach(dispo => {
            if (clase === dispo.clase_dispositivo.nombre) {
                if (this.data.dispositivos) {
                    for (const d of this.data.dispositivos) {
                        if (d.descripcion === dispo.descripcion) {
                            console.log('match found');
                            // Add elements to FormArray
                            this.dispositivosForm.push(this.generateFormGroup(dispo));  // <-- add the generated form group here
                            console.log('added ', dispo, ' to formarray');
                        }
                    }
                }
                dispositivosByClase.push(dispo);
            }
        });
        this.dispositivosByClases.push({ nombre: clase, dispositivos: dispositivosByClase });
        if (this.data.edit) {
            this.dispoArrayForm();
        }

    });
}

HTML：

<div formArrayName="dispositivosForm" *ngFor="let clase of dispositivosForm.value; index as i;">
  <div [formGroupName]="i">
    <h6>{{ clase.nombre }}</h6>
      <div>
        <mat-form-field>
          <mat-label></mat-label>
          <mat-select formControlName="dispositivos" multiple>
            <mat-option *ngFor="let dispo of clase.dispositivos" [value]="dispo.id">
              {{ dispo.descripcion }}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>
  </div>

如何将数据从数据库推送到FormArray

1 个答案: