如何在另一个formArray中迭代字符串数组的formArray？

Question

我有一个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());
}

Answer 1

你可以这样解决：

<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);
  }

}

可重现Example