基于NxNrwl的Angular共享表单库：整合FormGroup与嵌套表单

第一步：调整基础表单类 #

给CustomerForm和ProductForm添加@Injectable装饰器，确保它们能被注入到OrderForm中（因为内部使用了inject(FormBuilder)，需要依赖注入上下文支持）：

import { Injectable } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Injectable({ providedIn: 'root' })
export abstract class CustomerForm {
  protected readonly _fb: FormBuilder;
  constructor() {
    this._fb = inject(FormBuilder);
  }

  public _createForm(): FormGroup {
    return this._fb.group({
      id: [''],
      name: [''],
      email: ['']
    });
  }
}

@Injectable({ providedIn: 'root' })
export abstract class ProductForm {
  protected readonly _fb: FormBuilder;
  constructor() {
    this._fb = inject(FormBuilder);
  }

  public _createForm(): FormGroup {
    return this._fb.group({
      id: [''],
      name: [''],
      size: [''],
      color: ['']
    });
  }
}

第二步：实现OrderForm的表单整合 #

在OrderForm中注入基础表单类实例，分别处理嵌套表单和表单数组：

import { Injectable } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
import { CustomerForm } from './customer-form';
import { ProductForm } from './product-form';

@Injectable({ providedIn: 'root' })
export abstract class OrderForm {
  protected readonly _fb: FormBuilder;
  private readonly _customerForm: CustomerForm;
  private readonly _productForm: ProductForm;

  constructor() {
    this._fb = inject(FormBuilder);
    this._customerForm = inject(CustomerForm);
    this._productForm = inject(ProductForm);
  }

  public _createForm(): FormGroup {
    return this._fb.group({
      id: [''],
      date: [''],
      // 直接复用CustomerForm生成的FormGroup作为嵌套表单
      customer: this._customerForm._createForm(),
      // 初始化空的FormArray，用于存放产品表单
      products: this._fb.array([])
    });
  }

  // 可选：封装添加产品表单的方法，方便组件调用
  public addProductForm(orderForm: FormGroup): void {
    const productsArray = orderForm.get('products') as FormArray;
    productsArray.push(this._productForm._createForm());
  }
}

核心逻辑说明 #

• 嵌套表单（customer字段）：直接调用CustomerForm的_createForm()方法，返回的FormGroup可直接作为订单表单的嵌套控件，完整复用客户表单的结构和后续可扩展的验证逻辑。
• 表单数组（products字段）：用FormBuilder.array([])初始化空数组，若需要默认加载一个产品表单，可修改为products: this._fb.array([this._productForm._createForm()])。
• 动态添加产品：通过addProductForm方法，可在组件中快速向订单表单的产品数组中添加新的产品表单控件。

可选优化 #

如果不需要抽象类的继承能力，可直接去掉abstract关键字，将这些类作为普通服务类使用，简化后续组件中的实例化或注入流程。

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