在嵌套的*ngFor中使用单个FormArray的方法如下:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormArray, FormControl } from '@angular/forms';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
myForm: FormGroup;
constructor() {
this.myForm = new FormGroup({
nestedFormArray: new FormArray([])
});
}
ngOnInit() {
}
}
<form [formGroup]="myForm">
<div formArrayName="nestedFormArray">
<div *ngFor="let outerControl of myForm.get('nestedFormArray').controls; let i = index">
<div [formGroupName]="i">
<div formArrayName="innerFormArray">
<div *ngFor="let innerControl of outerControl.get('innerFormArray').controls; let j = index">
<input type="text" [formControlName]="j">
</div>
</div>
</div>
</div>
</div>
</form>
在上面的示例中,我们使用了两个嵌套的ngFor循环。外层的ngFor循环遍历外层的FormArray,内层的*ngFor循环遍历内层的FormArray。通过使用formGroupName指令,我们可以指定内层FormArray的索引。
这样,我们就可以在嵌套的*ngFor中使用单个FormArray了。每个输入框都与相应的FormControl关联,可以通过表单控件来获取和设置输入框的值。
对于更复杂的表单结构,可以根据需要添加更多的FormArray和FormControl,并在模板中相应地进行嵌套的*ngFor循环。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云