Angular Template 驱动表单动态表单部分答案

【问题标题】：Angular Template driven form dynamic form partAngular Template 驱动表单动态表单部分
【发布时间】：2021-01-09 15:34:49
【问题描述】：

我不知道用谷歌搜索什么来找到我的问题的答案，所以我在这里问。我必须创建一个包含一个始终相同的部分的表单，有些输入字段每个表单只能填写一次。然后有一组字段，我想让用户创建多个实例。它看起来像这样：字段 1，字段 2，带有“添加字段 3-5”的按钮，如果单击它，您可以填写字段 3-5，之后您可以提交表单或添加字段 3-5 的另一个实例，依此类推。我对 forntend 东西完全陌生，所以我不知道是否有这个词。无论如何，我会很感激你的帮助。

【问题讨论】：

itsolutionstuff.com/post/…
感谢您的快速教程，对我帮助很大

标签： angular angular-forms

【解决方案1】：

Angular 的 FormBuilder 和 FormArray 将帮助您轻松实现这一目标。

您可以在创建FormGroup 时定义FormArray 之类的FormControl 并在UI 中循环遍历它。

  demoForm: FormGroup;
  submitted = false;
  output =  {}

  get firstName(): FormControl {
    return this.demoForm.controls["firstName"] as FormControl;
  }
  get lastName(): FormControl {
    return this.demoForm.controls["lastName"] as FormControl;
  }
  get optionals(): FormArray {
    return this.demoForm.controls["optionals"] as FormArray;
  }

  constructor(private _formBuilder: FormBuilder) {
    this.demoForm = this._formBuilder.group({
      firstName: this._formBuilder.control('', [Validators.required]),
      lastName: this._formBuilder.control('', [Validators.required]),
      optionals: this._formBuilder.array([]),
  /*  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^  */
    });
  }

在你的 HTML 中

<form [formGroup]="demoForm">
    <input type="text" formControlName="firstName" />
    <input type="text" formControlName="lastName" />

    <div formArrayName="optionals">
    <!-- ^^^^^^^^^^^^^^^^^^^^^^^^ -->
        <div [formGroupName]="i" *ngFor="let optionals of optionals.controls; index as i;">
        <!-- ^^^^^^^^^^^^^^^^^^ -->
            <input type="text" formControlName="attr1" />
            <input type="text" formControlName="attr2" />
        </div>
    </div>
</form>

您可以使用以下方式在数组中添加或删除项目：

  AddOptionalItems(){
     // you can add validation here on each item individually.
     const group = new FormGroup({
      attr1: new FormControl(''),
      attr2: new FormControl(''),
    });
    this.optionals.push(group);
  }

  RemoveOptionalItems(i:number){
    this.optionals.removeAt(i);
  }

这里有一个小stackblitz，有一个更完整的版本。

编辑：

一篇有用的文章：https://netbasal.com/angular-reactive-forms-the-ultimate-guide-to-formarray-3adbe6b0b61a

【讨论】：

嘿，非常感谢您的详细描述，它对我帮助很大。首先，我尝试使用模板驱动的表单，但这要好得多。