Angular： FormArray 数组表单控件，允许用户手动修改页面表格的数据

FormArray 数组表单控件实现效果

需要将从 API 获取的数据以表格的形式显示在页面，且用户能手动更改该表格的数据，并将更改后的数据传给后端。

component.ts

arrayTestForm: FormGroup;

constructor(
	private fb: FormBuilder
)

// 1. 初始化表单
initForm() {
	this.arrayTestForm = this.fb.group({
		testArray: this.fb.array([]);
	})
}

// 获取表单
get testArray() {
	return <FormArray>this.arrayTestForm.get('testArray');
}

// 增加表单数组元素
addArrayTestFormItem() {
	this.testArray.push(
		this.fb.group({
			a1: [''],
			a2: [''],
			a3: [''],
			...
		})
	)
	this.arrayTestForm.updateValueAndValidity();
}

// 设置表单数组元素
setArrayTestFormItem（） {
	((this.arrayTestForm.controls['testArray'] as FormArray).at(i) as FormGroup).get('a1').setValue('new Value');
}

// 删除表单数组元素
removeArrayTestFormItem() {
	this.testArray.removeAt(i);
	this.arrayTestForm.updateValueAndValidity();
}

component.html

<div [FormGroup]='arrayTestForm'>
	<table>
		<tbody formArrayName='testArray'>
			<tr *ngFor='let item of arrayTestForm?.get('testArray')?.controls; let idx = index'>
				<td>{{item.controls['accountNumber']?.value}}</td>
			</tr>
		</tbody>
	</table>
</div>