在Angular中,可以通过以下步骤向FormGroup
添加FormArray
:
FormArray
对象。addControl
方法将FormArray
添加到FormGroup
中。下面是一个完整的示例代码:
import { Component } from '@angular/core';
import { FormGroup, FormBuilder, FormArray } from '@angular/forms';
@Component({
selector: 'app-example',
template: `
<form [formGroup]="myForm">
<div formArrayName="myArray">
<div *ngFor="let control of myForm.get('myArray').controls; let i = index">
<input [formControlName]="i">
</div>
</div>
</form>
`
})
export class ExampleComponent {
myForm: FormGroup;
constructor(private fb: FormBuilder) {
this.myForm = this.fb.group({
myArray: this.fb.array([]) // 创建一个空的FormArray
});
}
addControl() {
const control = this.fb.control(''); // 创建一个新的FormControl
this.myForm.get('myArray').push(control); // 将FormControl添加到FormArray中
}
}
在上面的示例中,我们使用FormBuilder
创建了一个名为myArray
的空FormArray
,然后将其添加到FormGroup
中。接下来,我们在模板中使用formArrayName
指令将FormArray
与HTML中的元素关联起来,并使用*ngFor
指令遍历FormArray
中的每个控件,并使用formControlName
指令将控件与input
元素关联起来。
你可以通过调用addControl
方法来动态添加新的控件。每次调用addControl
方法时,都会创建一个新的FormControl
对象,并将其添加到FormArray
中。这样,每次点击添加按钮时,就会在界面上动态添加一个新的输入框。
关于formArray
的更多详细信息,你可以参考腾讯云的文档。
Elastic 实战工作坊
Elastic 实战工作坊
云+社区技术沙龙[第29期]
云+社区开发者大会(北京站)
云+社区技术沙龙 [第30期]
云+社区技术沙龙[第25期]
高校公开课
云+社区沙龙online [新技术实践]
云+社区开发者大会(杭州站)
开箱吧腾讯云
领取专属 10元无门槛券
手把手带您无忧上云