Вложенная ошибка FormArray: «не удается найти элемент управления с путем:» - PullRequest
Новая
       42

Вложенная ошибка FormArray: «не удается найти элемент управления с путем:»

1 голос
/ 22 апреля 2020

Я разрабатываю приложение, используя Angular 9. Но я столкнулся с проблемой с вложенным formArray.

У меня ошибка: «Не удается найти элемент управления с путем: 'arrayProcedimientos -> subprocedimientos '"

Цель этой формы состоит в том, что arrayProcedimientos - это массив, а внутри него есть subprocedimientos, который тоже является массивом.

Ниже приведен мой код:

HTML: 

<form #f="ngForm" [formGroup]="registros" class="fila-contenido">
<!-- A lot of mat-form-field -->



                        <div formArrayName="arrayProcedimientos"
                            *ngFor="let procedimientoArr of registros.get('arrayProcedimientos')['controls']; let i = index">
                            <div [formGroupName]="i">
                                <!-- Procedimientos ESTO ES UN ARRAY-->
                                <mat-form-field appearance="">
                                    <mat-label>Procedimientos</mat-label>
                                    <mat-select formControlName="procedimiento">
                                        <mat-option *ngFor="let procedimiento of procedimientos"
                                            [value]="procedimiento">
                                            {{procedimiento}}
                                        </mat-option>
                                    </mat-select>
                                </mat-form-field>

                                <!-- Contenido ESTO ES UN ARRAY-->
                                <mat-form-field>
                                    <mat-label>Fecha Inicio</mat-label>
                                    <input matInput [matDatepicker]="picker8"
                                        formControlName="fechaInicioProcedimiento">
                                    <mat-datepicker-toggle matSuffix [for]="picker8"></mat-datepicker-toggle>
                                    <mat-datepicker #picker8></mat-datepicker>
                                </mat-form-field>

                                <!-- Contenido ESTO ES UN ARRAY-->
                                <mat-form-field>
                                    <mat-label>Fecha Fin</mat-label>
                                    <input matInput [matDatepicker]="picker9" formControlName="fechaFinProcedimiento">
                                    <mat-datepicker-toggle matSuffix [for]="picker9"></mat-datepicker-toggle>
                                    <mat-datepicker #picker9></mat-datepicker>
                                </mat-form-field>

                                <!-- Notas -->
                                <mat-form-field appearance="fill">
                                    <mat-label>Notas</mat-label>
                                    <textarea matInput formControlName="notasProcedimiento"></textarea>
                                </mat-form-field>
                            </div>
                            {{registros.value | json}}

                            <div formArrayName="subprocedimientos"
                                *ngFor="let subprocedimiento of procedimientoArr.get('subprocedimientos')['controls']; let j = index">
                                <div [formGroupName]="j">
                                    {{registros.value | json}}
                                </div>
                            </div>
                        </div>
</form>

TS: 

export class AddRegistroComponent implements OnInit {
data = {
    procedimientos: [
      {
        procedimiento: "",
        fechaInicioProcedimiento: "",
        fechaFinProcedimiento: "",
        notasProcedimiento: "",

        subprocedimientos: [
          {
            subprocedimiento: "",
            fechaInicioSubprocedimiento: "",
            fechaFinSubprocedimiento: "",
            fechaLimiteSubprocedimiento: "",
            notasSubprocedimiento: ""
          }
        ]
      }
    ]
  }

registros: FormGroup;

  constructor(public dialog: MatDialog, private service: AddRegistroService, private fbuilder: FormBuilder) {
    this.inicializaFormGroup();

  }

inicializaFormGroup() {
    this.registros = this.fbuilder.group({
      arrayProcedimientos: this.fbuilder.array([]),

    });

    this.setProcedimientos();
  }

  setProcedimientos() {
    let control = <FormArray>this.registros.controls.arrayProcedimientos;
    this.data.procedimientos.forEach(x => {
      control.push(this.fbuilder.group({
        procedimiento: x.procedimiento,
        fechaInicioProcedimiento: x.fechaInicioProcedimiento,
        fechaFinProcedimiento: x.fechaFinProcedimiento,
        notasProcedimiento: x.notasProcedimiento,

        subprocedimientos: this.setSubProcedimientos(x)
      }))
    })
  }

  setSubProcedimientos(x) {
    let arr = new FormArray([])
    x.subprocedimientos.forEach(y => {
      arr.push(this.fbuilder.group({
        subprocedimiento: y.subprocedimiento,
        fechaInicioSubprocedimiento: y.fechaInicioSubprocedimiento,
        fechaFinSubprocedimiento: y.fechaFinSubprocedimiento,
        fechaLimiteSubprocedimiento: y.fechaLimiteSubprocedimiento,
        notasSubprocedimiento: y.notasSubprocedimiento
      }))
    })
    return arr;
  }



}

Мое решение основано на стеке, созданном партнером из StackOverflow, вот ссылка его решения: https://stackblitz.com/edit/angular-dffny7?file=app%2Fapp.component.html

Спасибо за ваше время. Альберто.

...