Angular 模板驱动表单动态表单部分

Question

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

Answer 1

Angular的FormBuilder and 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

Angular 模板驱动表单动态表单部分

Angular Template driven form dynamic form part

angular

angular-forms