FormArray returning as FormControl instead of FormArray

Question

I'm having trouble with nested FormArrays in Angular reactive forms. One of my form arrays correctly returns as a FormArray and the other returns as FormControl. In the initialMaterials() function I have two console.logs. console.log(control) returns a FormControl item and console.log(this.objectServiceJobsArray) returns a FormArray.

I need to be able to add materials to specific jobs in the array and change them in the form when necessary.

this.objectServiceForm = this.formBuilder.group({
          onHolidays: [this.objectService.onHolidays],
          objectServiceJobs: this.formBuilder.array([this.objectServiceJobs()]),
          isBillable: [this.objectService.isBillable],
          defaultPrice: [this.objectService.defaultPrice],
          pricePerHour: [this.objectService.pricePerHour],
          doneWeekly: [this.doneWeekly],
        });

objectServiceJobs(): FormGroup {
    return this.formBuilder.group({
      job: [''],
      workDetail: [''],
      competentWorkers: [[]],
      materials: this.formBuilder.array([this.objectServiceJobMaterials()])
    });
}

objectServiceJobMaterials(): FormGroup {
    return this.formBuilder.group({
      material: [null],
      quantity: [null]
    });
}

initialMaterials(job) {
    const index = (<FormArray>this.objectServiceForm.get('objectServiceJobs')).controls.findIndex(x => x.value.job.id === job.id);
    const control = (<FormArray>this.objectServiceForm.controls['objectServiceJobs']).at(index).get('materials') as FormArray;
    console.log(control);
    console.log(this.objectServiceJobsArray);

    // job.materials.forEach(mat => {
    //   this.objectServiceJobsArray[index].materials.push(this.makeMaterialFormGroup(mat));
    // });
}

I have created a stackblitz example and your code is working fine(with a small change) . Refer : stackblitz.com/edit/angular-hp7hb6 — CruelEngine
– CruelEngine, Commented Oct 31, 2019 at 9:59
for some reason its still returning as FormControl for me and gives the"materials.push is not a funciton" error — eixcs
– eixcs, Commented Oct 31, 2019 at 10:31
@CruelEngine console.log(objectServiceJobs.at(index)) also shows materials as FormControl under controls :( — eixcs
– eixcs, Commented Oct 31, 2019 at 10:53
I've updated the stackblitz and it is working fine as console.log(objectServiceJobs.at(index)) is returning me a FormGroup — CruelEngine
– CruelEngine, Commented Oct 31, 2019 at 11:08
@CruelEngine Yes, in your example everything is working as it should but for me it still returns FormControl for some reason. — eixcs
– eixcs, Commented Oct 31, 2019 at 11:13

Saloo · Accepted Answer · 2019-10-31 09:46:20Z

2

I tried your code in my IDE but changed the style of extracting controls and I can see that console.log(control) returns me as FormArray.

initialMaterials(job) {
    const objectServiceJobs = this.objectServiceForm.get('objectServiceJobs') as FormArray;
    const index = objectServiceJobs.controls.findIndex(x => x.value.job.id === job.id);
    const control = objectServiceJobs.at(index).get('materials') as FormArray;
    console.log(control);
  }

answered Oct 31, 2019 at 9:46

Saloo

8166 silver badges13 bronze badges

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

1 Comment

eixcs Over a year ago

Ugh I'm still getting FormControl even though I can see in @CruelEngine s StackBlitz that it should return a FormArray :/

Bilel-Zheni · Accepted Answer · 2019-10-31 10:21:34Z

1

As saloo said the code works perfectly and returns a FormArray, just keep in mind that job is a form control (value isn't an object) so x.value.job.id is always undefined inside this line :

const index = objectServiceJobs.controls.findIndex(x => x.value.job.id === job.id);

answered Oct 31, 2019 at 10:21

Bilel-Zheni

1,3121 gold badge7 silver badges10 bronze badges

2 Comments

eixcs Over a year ago

I dont know, it seems to get the index correctly though

Bilel-Zheni Over a year ago

it's just because both variables are undefined so equality will be found always at index 0

Collectives™ on Stack Overflow

FormArray returning as FormControl instead of FormArray

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related