如何在 Angular 中正确使用 FormArray 类型

Question

我应该如何声明这个类型？

假设我有一个FormGroup

1. 我在构造函数中实例化它。

export interface MyType {
 myValue: string
}

myForm: FormGroup
myArray: FormArray // <FormControl<MyType>>

constructor(private _formBuilder: FormBuilder) {
  myForm = new FormGroup({
    myArray: this._formBuilder.array([])
  })
}

2. 因为我在某个地方有一个按钮可以让我向数组添加新元素，所以我执行以下操作

addElement() {
  this.myArray = this.myForm.get('myArray') as unknown as FormArray

  this.myArray.push(this.newElement())
}

private _newElement(): FormGroup { // What type to use ? 
  return this._formBuilder.group({
     myValue: ''
  })
}

但是当我使用

myArray: FormArray<FormControl<MyType>>

我收到以下错误

Argument of type 'FormGroup<any>' is not assignable to parameter of type 'FormControl<MyType>'.
  Type 'FormGroup<any>' is missing the following properties from type 'FormControl<MyType>': defaultValue, registerOnChange, registerOnDisabledChange

有人知道

• 我应该在这里选择哪种类型private _newElement(): FormGroup { // What type to use ?
  或
• 它是否正确myArray: FormArray<FormControl<MyType>>？->FormGroup<FormControl<MyType>>不正确

Answer 1

1. 声明类型化表单的接口/类。

export class MyTypeForm {
  myValue: FormControl<string>;
}

2. 将myArray类型声明为FormArray<FormGroup<MyTypeForm>>.

myArray: FormArray<FormGroup<MyTypeForm>>;

3. _newElement返回类型的方法FormGroup<MyTypeForm>。

private _newElement(): FormGroup<MyTypeForm> {
  return this._formBuilder.group<MyTypeForm>({
    myValue: this._formBuilder.control(''),
  });
}

演示@StackBlitz

参考：Angular 严格类型表单（完整指南）