我应该使用哪种技术来生成角9中的动态形式？

Question

我有一个有formGroup的页面。表单组中的字段都是必需的。在布局下面列出与此formGroup相关的表单。我将有一个按钮来添加更多的信息。此信息是可选的。单击按钮时，可选窗体将重复出现。例如。我想增加一个人的联系。我加了名字，电话，地址。然后，我可以添加更多的联系方式，点击“添加更多的联系人”。然后，一个包含“地址和电话”的表单将不断出现在页面上。我可以使用什么技术来添加这些动态字段？

Answer 1

你可以：

• 为动态字段/表单创建可重用组件
• 在按钮中，在模型数据中的属性(数组)中添加空的struct数据。
• 在模板中，您可以观察到此属性，并在有数据的情况下加载组件。

Answer 2

对于这个用例，您应该使用一些反应形式。他们会帮你处理动态部分。

你有几种方法可以做到这一点：

• 从一开始就创建所有FormControl，然后在用户选择它们时显示/隐藏它们
• 使用FormArray，动态创建一些FormControl并将它们添加到FormArray中，就像处理数组一样
• 使用FormGroup，动态创建一些FormControl，并将它们添加到FormGroup中，就像向对象添加一些属性一样。

下面是一个StackBlitz，展示了如何使用FormArray来实现它

它基于关于反应形式的角度文档。

以下是要点：

如何创建FormArray，添加/删除FormControl：

app.component.ts

export class AppComponent  {

  formArray = new FormArray([]);
  formGroup = new FormGroup({ 'array': this.formArray });

  constructor() {
    this.addControl();
    console.log('yolo', this.formArray);
  }

  addControl() {
    this.formArray.push(new FormControl('YOLO', [Validators.required]));
  }

  delete(index) {
    this.formArray.controls.splice(index, 1);
    this.formArray.updateValueAndValidity();
  }
}

如何在FormArray/FormControls上迭代

app.component.html

<form [formGroup]="formGroup">
    <div formArrayName="array">
        <div *ngFor="let control of formArray.controls; let i=index">
            <input type="text" [formControlName]="i"/>
            <button (click)="delete(i)">Delete</button>
        </div>
    </div>
    <button id="btnAddControl" (click)="addControl()">Add control</button>
</form>

作为奖励，这里有一段代码可以帮助您在开发过程中轻松地跟踪FormArray的值：

<pre>{{ formArray.value | json }}</pre>