Ionic 4 - Angular 6 formArrayName not working as expected

Question

Trying to use formArrayName with a list of ionic checkboxes This is my control:

this.planGroup = this.formBuilder.group({
        ...
        PlanEmails: this.formBuilder.array([
            this.formBuilder.group({
                PlanId: '',
                EmailId: ''
            })
        ]),
    });

And this is my HTML

         <ion-row>
            <ion-col formArrayName="PlanEmails" [sizeXs]="12" [sizeSm]="6" *ngFor="let email of emails">
              <ion-item>
                <ion-label>{{email.Title}}</ion-label>
                <ion-checkbox formControlName="EmailId" color="secondary" [value]="email.Id" slot="start"></ion-checkbox>
              </ion-item>
            </ion-col>
          </ion-row>

This is the error I'm getting

 ERROR Error: Cannot find control with path: 'PlanEmails -> EmailId'
    at _throwError (forms.js:1732)
    at setUpControl (forms.js:1640)
    at FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.addControl (forms.js:4454)
    at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName._setUpControl (forms.js:4959)
    at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName.ngOnChanges (forms.js:4909)
    at checkAndUpdateDirectiveInline (core.js:9246)
    at checkAndUpdateNodeInline (core.js:10514)
    at checkAndUpdateNode (core.js:10476)
    at debugCheckAndUpdateNode (core.js:11109)
    at debugCheckDirectivesFn (core.js:11069)

Tried moving formArrayName to ion-row and to ion-item and it didn't work.
I don't know I'm doing wrong. Tried reading Angular documentation but I can't seem to figure it out.

yurzui · Accepted Answer · 2018-10-04 07:14:04Z

4

+50

You should define correct path to EmailId control.

You have FormArray of FormGroups of FormControls but have defined FormArray of FormControls in template.

To fix it you should be using formGroupName directive.

<ion-col ... *ngFor="let email of emails; let i = index">
                                             ||
                                             \/
                                         add this
    <ion-item [formGroupName]="i">
                         ||
                         \/
                       and this

answered Oct 4, 2018 at 7:14

yurzui

215k32 gold badges450 silver badges413 bronze badges

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

4 Comments

Hassan Al Bourji Over a year ago

now i get a different error ERROR Error: Cannot find control with path: 'PlanEmails -> 1' and ERROR Error: Cannot find control with path: 'PlanEmails -> 1 -> EmailId'

yurzui Over a year ago

This means that your FormArray is not synchronized with emails array. They you should have the same count of elements

Hassan Al Bourji Over a year ago

tried doing this:

const emailsArray = new FormArray([]);             this.emails.forEach(email => {                 emailsArray.controls.push(this.formBuilder.group({EmailId: []}));             })             this.planGroup.addControl('PlanEmails', emailsArray);

the error is gone now but the formGroup is not filling when a checkbox is selected

yurzui Over a year ago

Try emailsArray.push instead of emailsArray.controls.push. Also you can fill array using Array.prototype.map method

Sateesh · Accepted Answer · 2018-10-04 07:13:45Z

0

There is few examples for FromGroup. Please follow this URL https://angular.io/guide/reactive-forms

answered Oct 4, 2018 at 7:13

Sateesh

1,32610 silver badges13 bronze badges

Collectives™ on Stack Overflow

Ionic 4 - Angular 6 formArrayName not working as expected

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related