求推荐Angular中实现可增删行发票表单的组件/库

针对你需要的支持动态增删发票行项的表单需求，以下是几个适合Angular生态的方案：

1. Angular原生Reactive Forms（无额外依赖） #

这是最灵活的方案，无需引入第三方库，完全基于Angular核心表单模块实现：

• 用FormArray管理所有发票行项，每个行项对应一个FormGroup（包含商品名称、数量、单价等字段）
• 通过push()方法添加新行项，removeAt(index)方法删除指定行项
• 示例核心代码：

// 初始化表单
invoiceForm = this.fb.group({
  customerInfo: this.fb.group({...}),
  lineItems: this.fb.array([this.createLineItem()])
});

// 创建单个行项表单组
createLineItem(): FormGroup {
  return this.fb.group({
    itemName: ['', Validators.required],
    quantity: [1, Validators.min(1)],
    unitPrice: [0, Validators.min(0)]
  });
}

// 添加行项
addLineItem(): void {
  this.lineItems.push(this.createLineItem());
}

// 删除行项
removeLineItem(index: number): void {
  this.lineItems.removeAt(index);
}

// 获取FormArray的快捷访问器
get lineItems(): FormArray {
  return this.invoiceForm.get('lineItems') as FormArray;
}

模板中通过*ngFor遍历lineItems，绑定每个表单控件即可。

2. Angular Material组件库 #

如果需要统一的UI风格，Angular Material的组件可以快速搭建专业的表单界面：

• 用<mat-table>展示发票行项，配合<mat-input>、<mat-button>实现编辑和增删操作
• 结合Reactive Forms的FormArray管理数据，Material组件自带的校验、交互反馈能提升用户体验
• 适合需要遵循Material Design规范的企业级应用

3. Ngx Formly #

这是一款强大的动态表单生成库，支持通过配置化方式定义表单结构：

• 可以通过配置字段数组实现行项的动态增删，无需编写大量模板代码
• 支持自定义组件、校验规则，适合复杂表单场景
• 内置的重复字段（repeat section）功能直接支持行项的添加/删除操作

4. PrimeNG组件库 #

PrimeNG提供了丰富的UI组件，其中的<p-table>（DataTable）组件天生支持行的动态操作：

• 自带行编辑、添加、删除的交互能力，搭配表单控件可以快速实现发票行项管理
• 组件样式成熟，提供多种主题可选，适合快速搭建界面

自定义组件方案 #

如果上述库都无法完全匹配你的需求，也可以封装独立的InvoiceLineItemComponent，父组件通过@Input()/@Output()传递行项数据和增删事件，结合FormArray实现数据同步，这种方式定制性最强。

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