Angular可复用FormArray输入组件优化：寻求替代双重类型转换方案

问题背景 #

在开发Angular 17响应式表单的可复用FormArray输入组件时，为了避免NG01053错误，不得不使用双重类型转换将FormArray伪装成FormGroup，并额外用[formGroup]="arrayGroup"包裹模板内容：

get arrayGroup(): FormGroup {
  return this.formArray as AbstractControl as FormGroup;
}

虽然当前方案能运行，但属于类型欺骗，存在优化空间。现有组件代码如下：

父组件（forms.component.ts） #

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
  FormArray,
  FormBuilder,
  FormGroup,
  ReactiveFormsModule,
} from '@angular/forms';

import { ArrayInputComponent } from './array-input/array-input.component';

@Component({
  selector: 'app-forms',
  standalone: true,
  imports: [ArrayInputComponent, CommonModule, ReactiveFormsModule],
  template: `
    <div>
      <h1>Forms</h1>
      <form [formGroup]="form" (ngSubmit)="onSubmit()">
        <app-array-input [formArray]="formArray"></app-array-input>
        <button>Submit</button>
      </form>
    </div>
  `,
})
export class FormsComponent implements OnInit {
  form: FormGroup = this.fb.group({});

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.form.addControl('formArray', this.fb.array([]));
  }

  get formArray() {
    return this.form.get('formArray') as FormArray;
  }

  onSubmit() {
    console.log('Form valid: ', this.form.valid);
    console.log('Form values: ', this.form.value);
  }
}

原问题子组件（array-input.component.ts） #

import { CommonModule } from '@angular/common';
import { Component, Input } from '@angular/core';
import {
  AbstractControl,
  FormArray,
  FormBuilder,
  FormGroup,
  ReactiveFormsModule,
  Validators,
} from '@angular/forms';

@Component({
  selector: 'app-array-input',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
  template: `
    <div [formGroup]="arrayGroup">
      <h1>Array Input</h1>
      <button type="button" (click)="add()">Add</button>
      <ng-container *ngFor="let item of this.formArray.controls; let i = index">
        <div [formGroupName]="i">
          <input placeholder="name" formControlName="name" />
          <input placeholder="relation" formControlName="relation" />
        </div>
      </ng-container>
    </div>
  `,
})
export class ArrayInputComponent {
  @Input() formArray!: FormArray;

  constructor(private fb: FormBuilder) {}

  add() {
    const item = this.fb.group({
      name: ['', [Validators.required]],
      relation: [],
    });

    this.formArray.push(item);
  }

  get arrayGroup(): FormGroup {
    return this.formArray as AbstractControl as FormGroup;
  }
}

最优解决方案 #

核心修正逻辑 #

1. 移除错误的类型转换和arrayGroup getter：FormArray与FormGroup是不同的AbstractControl子类，强行转换属于类型欺骗，违背类型安全原则。
2. 使用Angular原生的[formArray]指令绑定传入的FormArray，为formGroupName提供正确的父级上下文（FormArray本身就是formGroupName的合法父容器）。

修改后的子组件代码 #

// FILENAME: ./array-input/array-input.component.ts

import { CommonModule } from '@angular/common';
import { Component, Input } from '@angular/core';
import {
  FormArray,
  FormBuilder,
  FormGroup,
  ReactiveFormsModule,
  Validators,
} from '@angular/forms';

@Component({
  selector: 'app-array-input',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
  template: `
    <div [formArray]="formArray">
      <h1>Array Input</h1>
      <button type="button" (click)="add()">Add</button>
      <ng-container *ngFor="let item of formArray.controls; let i = index">
        <div [formGroupName]="i">
          <input placeholder="name" formControlName="name" />
          <input placeholder="relation" formControlName="relation" />
        </div>
      </ng-container>
    </div>
  `,
})
export class ArrayInputComponent {
  @Input() formArray!: FormArray;

  constructor(private fb: FormBuilder) {}

  add() {
    const item = this.fb.group({
      name: ['', [Validators.required]],
      relation: [],
    });

    this.formArray.push(item);
  }
}

方案优势 #

• 符合Angular响应式表单的设计规范，formGroupName直接关联到FormArray的数组项，上下文合法。
• 完全移除类型欺骗操作，保证类型安全。
• 代码更简洁，无需额外的冗余逻辑。

内容的提问来源于stack exchange，提问作者cvau