在Angular中,可以使用FormArray来处理动态表单中的数组字段。要在现有的FormArray上添加新的行,可以按照以下步骤进行操作:
get
方法来获取,例如:this.myForm.get('myFormArray')
。new FormGroup()
来创建。name
的输入字段,可以使用new FormControl()
来创建该字段的表单控件。push
方法。例如:this.myForm.get('myFormArray').push(newRowFormGroup)
。完成以上步骤后,新的行将被添加到现有的FormArray中。
以下是一个示例代码:
import { Component } from '@angular/core';
import { FormGroup, FormControl, FormArray } from '@angular/forms';
@Component({
selector: 'app-my-form',
template: `
<form [formGroup]="myForm">
<div formArrayName="myFormArray">
<div *ngFor="let row of myFormArray.controls; let i = index" [formGroupName]="i">
<input formControlName="name" placeholder="Name">
</div>
</div>
<button (click)="addNewRow()">Add Row</button>
</form>
`,
})
export class MyFormComponent {
myForm: FormGroup;
constructor() {
this.myForm = new FormGroup({
myFormArray: new FormArray([]),
});
}
get myFormArray() {
return this.myForm.get('myFormArray') as FormArray;
}
addNewRow() {
const newRowFormGroup = new FormGroup({
name: new FormControl(''),
});
this.myFormArray.push(newRowFormGroup);
}
}
在上述示例中,我们创建了一个包含一个FormArray的表单。每个FormArray中的行都由一个FormGroup表示,其中包含一个名为name
的输入字段。通过点击"Add Row"按钮,可以动态地添加新的行。
请注意,上述示例中的代码仅用于演示如何在现有的FormArray上添加新的行,实际应用中可能需要根据具体需求进行适当的修改。
领取专属 10元无门槛券
手把手带您无忧上云