CODEWITHSUNDEEP
angularangular-reactive-formsformarrayformgroups
prevox
prevox

Reputation: 576

setValue usage with an array of FormGroups

After adding an array of FormGroups to my form I'm not able to call setValue inside of the FormGroup

This is what I've tried:

this.formGroup.controls.formArray.get('input').setValue('test');

and

this.formGroup.get('formArray').get('input').setValue('test');

Which throws:

Cannot read property 'setValue' of null

TS: 

    get formArray(): AbstractControl | null { return this.formGroup.get('formArray'); }

    this.formGroup = this.fb.group({
        formArray: this.fb.array([

            this.fb.group({

                input: [null, [Validators.required]]
            }),

            this.fb.group({

                anotherInput: [null, [Validators.required]]
            }),
        ])
    });

What am I doing wrong?

Upvotes: 2

Views: 749

Answers (1)

bryan60
bryan60

Reputation: 29305

a form array's controls is an array of AbstractControls, and in tihs case, you have groups in that array, so you need to access it as one:

this.formGroup.get('formArray').get('0').get('input').setValue('test');

run the get at the index of the form array corresponding to the group you want, then you can access the control on the group at that array.

you also probably want to change your getter:

get formArray(): FormArray { return this.formGroup.get('formArray') as FormArray; }

Upvotes: 4

Related Questions