在 angular 中以反应形式添加控件数组

Question

 this.reactiveForm = this.formBuilder.group({
      EventType: new FormControl({value: this.EventTypes[0].Name}, [Validators.required]),
      StoreName: new FormControl('')
});

我想要多个StoreName作为formControl的数组。我是 angular 的新手。谁能指导我？

Answer 1

使用类似下面的代码

StoreName: this.formBuilder.array([])

如果您在上面代码中提供的空数组中有初始值，您可以在其中传递初始值。我希望 this.formBuilder 的类型是 FormBuilder

Answer 2

来自angular guide:

FormArray 是 FormGroup 的替代品，用于管理任意数量的未命名控件。与表单组实例一样，您可以从表单数组实例中动态插入和移除控件，并且表单数组实例值和验证状态是从其子控件中计算出来的。但是，您不需要按名称为每个控件定义一个键，因此如果您事先不知道子值的数量，这是一个很好的选择。

您可以通过在数组中定义控件来初始化具有任意数量的控件（从零到很多）的表单数组。添加别名属性到您的表单的表单组实例以定义表单数组。

使用 FormBuilder.array() 方法定义数组，使用 FormBuilder.control() 方法用初始控件填充数组。

示例：

import { FormArray } from '@angular/forms';

profileForm = this.fb.group({
  firstName: ['', Validators.required],
  lastName: [''],
  address: this.fb.group({
    street: [''],
    city: [''],
    state: [''],
    zip: ['']
  }),
  aliases: this.fb.array([
    this.fb.control('')
  ])
});

与重复 profileForm.get() 方法获取每个实例相比，

A getter 提供了对表单数组实例中别名的轻松访问。表单数组实例表示数组中未定义数量的控件。通过 getter 访问控件很方便，而且这种方法很容易重复用于其他控件。

get aliases() {
  return this.profileForm.get('aliases') as FormArray;
}

要附加表单模型中的别名，您必须将其添加到模板中。与 FormGroupNameDirective 提供的 formGroupName 输入类似，formArrayName 将表单数组实例的通信绑定到具有 FormArrayNameDirective 的模板。

<div formArrayName="aliases">
  <h3>Aliases</h3> <button (click)="addAlias()">Add Alias</button>

  <div *ngFor="let address of aliases.controls; let i=index">
    <!-- The repeated alias template -->
    <label>
      Alias:
      <input type="text" [formControlName]="i">
    </label>
  </div>
</div>

在 angular 中以反应形式添加控件数组

Adding an array of control in a reactive form in angular

angular

angular-reactive-forms