I use Angular Material in my project and I have this form:
this.form = this.formBuilder.group({
addresses: this.formBuilder.array([]),
contactPersons: this.formBuilder.array([])
});
addresses looks like this:
let address = this.formBuilder.group({
address: this.formBuilder.group({
street: ['Street Number 1', [Validators.minLength(2)]],
...
}),
contactPersons: contactPersonsArray
});
This means that I have contactPersons at two different places. My question now would be how to access contactPersons in address?
I have tried this:
<div formArrayName="addresses">
<div *ngFor="let address of addresses.controls; index as i" [formGroup]="address">
<div formArrayName="address.contactPersons"> // address.contactPersons does not work
Amount of contact persons {{address.contactPersons.length}}:
</div>
<div formArrayName="contactPersons"> // I also tried this but here contactPersons from outer address is taken
[EDIT] I have solved my problem, the solution to acces contactPersons within addresses is
form.controls.addresses.controls[i].controls.contactPersons.controls
Why it is so complicated to access objects/arrays with Angular Material is a mystery to me - maybe I have a worse overview.