时间戳

首页 > 解决方案 > Angular Template 驱动表单动态表单部分

angular - Angular Template 驱动表单动态表单部分

问题描述

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

标签： angularangular-forms

解决方案

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

您可以在创建并在 UI 中循环遍历它时定义一个FormArraylike a 。FormControlFormGroup

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

这是一个更完整版本的小型堆栈闪电战。

编辑 ：

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

推荐阅读