angular - FormArray 动态形式angular

Question

我已经实现了一个 stackblitz，您可以在其中使用一些配置创建一个动态表单。一切正常，直到您使用 FormArray .什么想法？基本上，您的配置文件中可以有许多不同类型的字段。例如 checkbox , text , number select等等。在某些情况下，你应该有一个更复杂的结构，所以你应该有一个 FormArray .在这个stackblitz中，我试图代表正在发生的事情
https://stackblitz.com/edit/angular-dynamic-form-builder-gycshd?file=app/dynamic-form-builder/dynamic-form-builder.component.ts
所以，当我发现一个 array type 我要创建一个 FormArray 而不是一个简单的 FormControl这是我的字段列表

 public fields: any[] = [
    {
      type: "text",
      name: "firstName",
      label: "First Name",
      required: true
    },
    {
      type: "text",
      name: "lastName",
      label: "Last Name",
      required: true
    },
    {
      type: "text",
      name: "email",
      label: "Email",
      required: true
    },
    {
      type: "text",
      name: "description",
      label: "Description",
      required: true,
      multiLine: true
    },
    {
      type: "dropdown",
      name: "country",
      label: "Country",
      value: "in",
      required: true,
      options: [{ value: "in", label: "India" }, { value: "us", label: "USA" }]
    },
    {
      type: "array",
      name: "users",
      label: "Users",
      structure: "users.json"
    }
  ];

这是我的动态表单构建器组件

export class DynamicFormBuilderComponent implements OnInit {
  @Output() onSubmit = new EventEmitter();
  @Input() fields: any[] = [];
  form: FormGroup;
  allDatas: any;
  constructor() {}

  ngOnInit() {
    let fieldsCtrls = {};
    this.allDatas = getData();
    for (let f of this.fields) {
      if (f.type != "array") {
        fieldsCtrls[f.name] = new FormControl(
          this.allDatas[f.name] || "",
          Validators.required
        );
      } else {
        fieldsCtrls[f.name] = new FormArray([
          new FormControl(this.allDatas[f.name] || "", Validators.required)
        ]);
      }
    }
    this.form = new FormGroup(fieldsCtrls);
  }
}

如您所见，我从 allDatas 设置了一个值(如果存在)，并使用 FormControls 和 FormArray 创建 FormGroup。但是当我生成 arraybox我有错误。这是显示 FormArray 控件的 arraybox 组件:

import { HttpClient } from "@angular/common/http";
import { Component, Input, OnInit } from "@angular/core";
import { FormGroup } from "@angular/forms";
import { ConfigService } from "../../config.service";

@Component({
  selector: "arraybox",
  template: `
    <div [formGroup]="form">
      <div formArrayName="{{ field.name }}">
        <div
          *ngFor="let obj of arrayFileds; index as idx"
          [formGroupName]="idx"
        >
          <input
            attr.type="{{ obj.type }}"
            class="form-control"
            placeholder="{{ obj.name }}"
            id="{{ obj.name }}"
            name="{{ obj.name }}"
            formControlName="{{ idx }}"
          />
        </div>
      </div>
    </div>
  `
})
export class ArrayBoxComponent implements OnInit {
  @Input() field: any = {};
  @Input() form: FormGroup;
  arrayFileds: any = [];

  get isValid() {
    return this.form.controls[this.field.name].valid;
  }
  get isDirty() {
    return this.form.controls[this.field.name].dirty;
  }

  constructor(private config: ConfigService) {}

  ngOnInit(): void {
    this.arrayFileds = this.config.getData(this.field.structure);
    console.log(this.arrayFileds);
  }
}

getData() 返回该 FormArray 的结构。在这种情况下

[{
    "label": "Username",
    "name": "userName",
    "type": "text"
}, {
    "label": "User email",
    "name": "userEmail",
    "type": "text"
}]

控制台中的错误是:

ERROR
Error: Cannot find control with path: 'users -> 0 -> 0'
ERROR
Error: Cannot find control with path: 'users -> 1'

我真的不知道这里出了什么问题。如何使用 FormArray 在此表单中显示字段及其值？
注意。如果我使用 http 解析 json，stackblitz 会给我一个错误，所以现在我直接使用 json 的导入。基本上， this.field.structure在这个例子中没有使用(但应该使用)。

Answer 1

好吧，干得好，但你需要改变一些东西来实现你想要的。

您需要更改初始化表单数组的方式。您已在 FormArray 中命名控件所以你需要推FormGroup进入您的 FormArray :

 for (let f of this.fields) {
      if (f.type != "array") {
        fieldsCtrls[f.name] = new FormControl(
          this.allDatas[f.name] || "",
          Validators.required
        );
      } else { // changed part
        fieldsCtrls[f.name] = new FormArray([
          ...this.allDatas[f.name].map(
            r =>
              new FormGroup(
                Object.entries(r).reduce((acc, [k, v]) => {
                  acc[k] = new FormControl(v || "", Validators.required);
                  return acc;
                }, {})
              )
          )
        ]);
      }

上面的代码基本上生成了 FormGroup对象键为 FormControls

您需要更改您的 ArrayBox组件模板如下:

 <input
            attr.type="{{ obj.type }}"
            class="form-control"
            placeholder="{{ obj.name }}"
            id="{{ obj.name }}"
            name="{{ obj.name }}"
            formControlName="{{ obj.name }}"
          />

你有 formControlName="{{ idx }}"这将导致 Angular 寻找 FormControl命名 0 1这就是您收到 Error: Cannot find control with path: 'users -> 0 -> 0' 的原因之一错误。另一个原因是您直接添加 FormControl s 代替 FormGroup s。作为您的 ArrayBox模板状态 FormArray有一个数组 FormGroup Working Stackblitz
正如@End.Game 注意到数组部分仍有一些部分需要修复。问题的根源在于 ArrayBox模板。您正在迭代配置对象以呈现表单。但既然是 FormArray您还需要为 FormArray 的计数重复该模板。 .所以你需要另一个 *ngFor实现这一目标:

   <div [formGroup]="form">
      <div formArrayName="{{ field.name }}">
        <div *ngFor="let frm of formArray.controls; index as idx">
          <div formGroupName="{{ idx }}">
            <div *ngFor="let obj of arrayFileds;">
              <input
                attr.type="{{ obj.type }}"
                class="form-control"
                placeholder="{{ obj.name }}"
                id="{{ obj.name }}"
                name="{{ obj.name }}"
                formControlName="{{ obj.name }}"
              />
            </div>
            <hr />
          </div>
        </div>
      </div>
    </div>

另请注意，搬家 idx变量到父循环。