Angular 8: How to use formControlName with FormArray

Question

How can I map formControlName to a specific formArray item?

I have no control over the server data and trying to create a form with a phone numbers array.

The form itself visually does not layout the phones side by side, and I want to be able to declare a phone's input control the same as I normally would with formGroup.

What I have so far is the below:

Controller:

const exampleData = {
                'name': 'John Doe',
                'phones': [
                    {
                        'type': 'home',
                        'number': '5555555'
                    },
                    {
                        'type': 'cell',
                        'number': '5555555'
                    }
                ]
            };

    this.form = this.fb.group({
         name:[],
         phones: this.fb.array([
             this.fb.group({
                 type: '',
                 number: []
             }),
             this.fb.group({
                 type: '',
                 number: []
             })
         ]),
     });

    this.form.patchValue(exampleData);

Template

<input type="text" formControlName="name">

<!--  This works but I need to loop -->
<div formArrayName="phones">
    <div *ngFor="let phone of form.get('phones').controls; let i = index">
        <div [formGroupName]="i">
            <label>Type: </label><input formControlName="type"/>
            <label>Number: </label><input formControlName="number"/>
        </div>
    </div>
</div>

<!--  How can I point to a phone directly? -->
<input type="text" formControlName="point to type home's number...with helper function or something...">

Looking to see if this is even possible?

can you describe your problem clearly I don't get what i your problem so I can help 🙂 — Muhammed Albarmavi
– Muhammed Albarmavi, Commented Sep 19, 2019 at 20:02
@malbarmawi I created a stackblitz about this question however once phone number is modified it is not updated and vice versa. — robert
– robert, Commented Sep 19, 2019 at 20:07
@robert thanks for the demo 👍 , I have managed to solve this problem — Muhammed Albarmavi
– Muhammed Albarmavi, Commented Sep 19, 2019 at 20:27
@robert, your example was what I was looking for (with '.at(1)', you can put in an answer. I don't need to have two inputs pointing to the same form model value and updating, I only needed one. Thus, the loop in the template was just an example of what I knew. malbarmawi thanks for showing how to update the 2 form models and apologies if question was ambiguous. — Thibs
– Thibs, Commented Sep 19, 2019 at 20:48

robert · Accepted Answer · 2019-09-19 20:54:32Z

3

Try this to get access to the formArray item:

  <div [formGroup]="form.get('phones').at(1)">
    <input type="text" formControlName="num">
  </div>

Stackblitz

answered Sep 19, 2019 at 20:54

robert

6,1907 gold badges31 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Muhammed Albarmavi Over a year ago

this one a nice catch 👍

Muhammed Albarmavi · Accepted Answer · 2019-09-19 20:37:51Z

2

I solve this by run setValue to that component again this why any input by the same form control will update ,this become like two way data binding when we use ngModel where the data flow to the instant and other controls.

this the method will create the formGroup

getPhoneGroup() {
    const form = this.fb.group({
      type: '',
      num: []
    });

    const elm = form.get('num');
    elm.valueChanges.subscribe(val => {
      elm.setValue(val, { emitEvent: false })
    });

    return form;
  }

demo 🚀🚀

edited Sep 19, 2019 at 20:37

answered Sep 19, 2019 at 20:26

Muhammed Albarmavi

24.5k9 gold badges72 silver badges92 bronze badges

3 Comments

robert Over a year ago

Great solution. Does these valueChanges subscriptions auto cleanup?

Muhammed Albarmavi Over a year ago

@robert no , I usually do unsubscribe but I haven't mentioned it here so the idea stay clear

robert Over a year ago

Thanks for the clarification.

Collectives™ on Stack Overflow

Angular 8: How to use formControlName with FormArray

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related