Как перебрать formArray массива строк внутри другого formArray? - PullRequest
Новая
       26

Как перебрать formArray массива строк внутри другого formArray?

0 голосов
/ 07 июня 2019

У меня есть ответ json как 

{
    "firstArray":[
        {
            "secondArray":[
                "firstElement",
                "secondElement",
                "thirdElement"
            ]
        }
    ]   
}

Я хочу, чтобы он отображался на странице HTML и создавал динамическую форму. (Я упомянул код, который я использовал в Html) Но он не отображает никаких данных и выдает исключение, так как не найдено значение для firstArray -> 0 -> secondArray -> 0

Я также упомянул здесь код файла .ts. Пожалуйста, определите и помогите исправить код. Я перепробовал все типы команд для ngFor условия. Но ничто не помогло сделать его динамичным. 

<div formArrayName="firstArray">
  <div *ngFor="let first of groupName.get('firstArray').controls; let i = index">
    <div [formGroupName]="i">
      Second: 
      <ul formArrayName="secondArray">
        <div *ngFor="let second of first.get('second').controls; let in = index">
          <input type="text" value={{second.value}} formControlName="in">
        </div>
      </ul>
      <button (click)="addSecondArrayElement()">Add</button>
    </div>
  </div>
</div>

firstArray: new FormArray([
    new FormGroup({
        secondArray: new FormArray([
            new FormControl()
        ])
    })
])

addSecondArrayElement(): void {
    (<FormArray>this.groupName.get('firstArray').get('secondArray').push(new FormControl());
}

1 Ответ

0 голосов
/ 07 июня 2019

Вы можете решить таким образом: 

<div class="container">
  <div class="row">
    <div class="col-12">

      <form [formGroup]="form" (ngSubmit)="submit()">
        <div formArrayName="firstArray">
          <div *ngFor="let X of form.controls.firstArray.controls; let ix=index">
            <div formGroupName="{{ix}}" class="Xs">
              <div formArrayName="secondaryArray">
                <div class="form-group" *ngFor="let Y of X.controls.secondaryArray.controls; let iy=index">
                  <label for="id-{{iy}}">Element {{iy}}</label>
                  <input type="text" id="id-{{iy}}" class="form-control" [formControlName]="iy">
                </div>
              </div>
            </div>
            <button type="button" class="btn btn-secondary" (click)="addSecondArrayElement()">add</button>
          </div>
        </div>
        <br>
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>

   </div>
  </div>
</div>

import { Component, OnInit }                              from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class DynamicFormComponent implements OnInit {

  form: FormGroup;
  firstArray: any[] = [
    {
      secondArray: ["firstElement", "secondElement", "thirdElement"]
    }
  ]

  constructor(
    private fb: FormBuilder
  ) {
    this.start();
  }

  start(): void {
    this.form = this.fb.group({
      firstArray: new FormArray([])
    });

    this.create();
  }

  create(): void {
    this.firstArray.map((o: any, ix: number) => {
      // First level
      const control = new FormGroup({
        secondaryArray: new FormArray([])
      });
      (this.form.controls.firstArray as FormArray).push(control);
      // Second level
      o.secondArray.map((o: any, iy: number) => this.addSecondArrayElement(o));
    });
  }

  addSecondArrayElement(o: string = ''): void {
    const control = new FormControl(o);
    ((this.form.controls.firstArray as FormArray).at(0).get('secondaryArray') as FormArray).push(control);
  }

  ngOnInit() { }

  submit() {
    console.log(this.form.value);
  }

}

Воспроизводимый Пример

...