在另一个FormArray中访问FormArray的方法是通过使用嵌套的索引来访问。以下是一个示例代码,展示了如何在另一个FormArray中访问FormArray:
import { Component } from '@angular/core';
import { FormArray, FormControl, FormGroup } from '@angular/forms';
@Component({
selector: 'app-example',
template: `
<form [formGroup]="myForm">
<div formArrayName="outerFormArray">
<div *ngFor="let innerFormArray of outerFormArray.controls; let i = index">
<div [formGroupName]="i">
<input formControlName="innerControl" placeholder="Inner Control">
</div>
</div>
</div>
</form>
`,
})
export class ExampleComponent {
myForm: FormGroup;
get outerFormArray(): FormArray {
return this.myForm.get('outerFormArray') as FormArray;
}
constructor() {
this.myForm = new FormGroup({
outerFormArray: new FormArray([
new FormGroup({
innerControl: new FormControl('Value 1'),
}),
new FormGroup({
innerControl: new FormControl('Value 2'),
}),
]),
});
}
}
在上面的示例中,我们创建了一个名为myForm
的FormGroup,并在其中创建了一个名为outerFormArray
的FormArray。在模板中,我们使用formArrayName
指令将outerFormArray
绑定到外部div元素上。
然后,我们使用*ngFor
指令遍历outerFormArray.controls
,并使用formGroupName
指令将每个内部FormArray绑定到内部div元素上。这样,我们就可以在内部div中访问内部FormArray中的控件。
在示例中,我们使用一个简单的input元素来展示内部控件的访问。你可以根据需要添加更多的控件或自定义模板。
请注意,这只是一个示例,你可以根据自己的需求进行修改和扩展。对于更复杂的场景,你可能需要使用更多的嵌套索引来访问更深层次的FormArray。
腾讯云GAME-TECH沙龙
DBTalk技术分享会
Techo Day
GAME-TECH
高校公开课
云+社区技术沙龙[第9期]
云+社区技术沙龙[第6期]
腾讯技术开放日
领取专属 10元无门槛券
手把手带您无忧上云