Question

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

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

Answer 1

从angular guide:

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

通过在数组中定义控件，可以使用从零到许多的任意数量的控件来初始化表单数组。在表单组实例中添加一个aliases属性，以定义表单数组。

使用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（）方法以获取每个实例相比，使用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>

Answer 2

使用下面的代码

StoreName: this.formBuilder.array([])

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

以角度的反应形式添加控件数组

2 个答案: