0

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.

2
  • 1
    can you provide a stackblitz? Commented May 4, 2020 at 20:29
  • I changed addressesWithProducts to addresses - now it should be looking better to understand Commented May 5, 2020 at 6:44

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.