Question

编辑1：我很确定（虽然不是100％肯定）该错误在formArrayName声明内，因为构建没有它的表单会产生积极的结果。可能与表单无法正确导航formArray有关吗？

尝试使用数据库中的数据构建动态formarray时出现以下错误

ERROR Error: "Cannot find control with path: 'dispositivosForm -> 0'"
ERROR Error: "Cannot find control with path: 'dispositivosForm -> 1'"
ERROR Error: "Cannot find control with path: 'dispositivosForm -> 2'"
[...]

一直到大约11。

我在有类似问题的线程中进行了搜索，但对我的情况没有帮助。

我要做的是添加一个编辑表单，该表单使用FormArray来基于从DB中检索到的数据在要构建的选择字段中预先选择某些选项。

现在，可以毫无问题地检索数据并将其（显然）存储在FormArray上。但是，当我尝试显示选择字段时，它会中断并给出上述错误。

此编辑表单与创建表单共享空间，这就是为什么我要遍历dispositivosByClase和clase.dispositivo以生成供用户交互的空字段。

这是代码。

HTML：

<div formArrayName="dispositivosForm" *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>

TypeScript：

  equipoForm: FormGroup;
  dispositivos: any = [];
  dispositivosByClases = [];
  dispoArray = [];
  dispoArrayValue = [];
  labelDispositivos: any[] = [];
  dispositivosForm: FormArray = new FormArray([]);

。

ngOnInit() {
    // Inicializa campos
    this.equipoForm = this.fb.group({
      id: [''],
      numero_cupi: [''],
      numero_serie: [''],
      descripcion: [''],
      dispositivosForm: [],
      numero_licencia_window: [],
      codigo: ['', [Validators.required]],
      partida_id: [''],
      partida: ['', [Validators.required]],
      enable: [true],
    });

。

prepareClaseDispositivo() {
    this.dispositivos.forEach(dispo => {
      if (!this.labelDispositivos.includes(dispo.clase_dispositivo.nombre)) {
        this.labelDispositivos.push(dispo.clase_dispositivo.nombre);
      }
    });
    this.labelDispositivos.forEach(clase => {
      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) {
                this.dispoArrayValue.push(dispo);
              }
            }
          }
          dispositivosByClase.push(dispo);
        }
      });
      this.dispositivosByClases.push({ nombre: clase, dispositivos: dispositivosByClase });
      if (this.data.edit) {
        this.dispoArrayForm();
      }
    });
    this.dispositivosForm.push(this.generateFormGroup(this.dispoArrayValue));
    console.log(this.dispositivosForm);
  }

。

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

FormArray输出：

{…}

_onCollectionChange: function _onCollectionChange()
_onDisabledChange: Array []

asyncValidator: null

controls: Array [ {…} ]

errors: null

pristine: true

status: "VALID"

statusChanges: Object { _isScalar: false, closed: false, isStopped: false, … }

touched: false

validator: null

value: (1) […]

0: {…}

dispositivos: (1) […]

0: Object { id: "eyJpdiI6InFQYTJEbmpENm9lVCsrVVdxZEo3eUE9PSIsInZhbHVlIjoiSTVIaVwvRHVXOFdvS2h6TXNaeURsNHc9PSIsIm1hYyI6IjFiMGJlNmI1NzQ1NGFiZGQ2ZDhjZDJlMzE3MmY1NmYyOTBmMTg1YjdlNTk3OTA3Y2MzMjQwZDEwNzNlZjMwNzgifQ==", descripcion: "9", enable: true, … }

length: 1

<prototype>: Array []

<prototype>: Object { … }

length: 1

<prototype>: Array []

valueChanges: Object { _isScalar: false, closed: false, isStopped: false, … }

<prototype>: Object { … }
equipo-new-edit.component.ts:155:12

Answer 1

我认为您的错误出在您的HTML中：

<div formArrayName="dispositivosForm" *ngFor="let clase of dispositivosByClases; index as i;">
    <div [formGroupName]="i">
        <!--
            ...
        -->
    </div>
</div>

你是说

<div formArrayName="dispositivosForm">
    <div *ngFor="let clase of dispositivosByClases; let i = index;" [formGroupName]="i">
        <!--
            ...
        -->
    </div>
</div>

请注意，我将*ngFor移至<div>的{{1}}，因为您正在做的是为您的formGroupName创建多个<div>根据您的索引，只有一个dispositivosForm绑定到您的<div>，而不是您的formGroupName一个<div>和每个索引多个dispositivosForm。

错误：“找不到路径为'dispositivosForm'的控件”

1 个答案: