Accessing Nested Controls of Angular Forms

Question

I'm upgrading an application from Angular 2 to 7, and it looks like most of my forms have broken. I have multiple instances where I receive the following error:

Property 'controls' does not exist on type 'AbstractControl'

In this particular instance, I have a block that appears to looping through and validating form arrays.

for (let i = 0, len = this.form.controls[control].controls.length; i < len; i++) {

  this.form.controls[control].controls[i].controls.ConditionTypeId.setValidators(Validators.required);
  this.form.controls[control].controls[i].controls.ConditionTypeId.updateValueAndValidity();
  this.form.controls[control].controls[i].controls.ToBeCompletedDate.setValidators(Validators.required);
  this.form.controls[control].controls[i].controls.ToBeCompletedDate.updateValueAndValidity();
}

Has there been a major change in how nested forms/form arrays work since Angular 2, and if so, what would be the most efficient way for me to refactor any code that deals with nested forms in this manner?

Frederick · Accepted Answer · 2019-06-26 21:12:40Z

2

I'm not sure when the change occurred because I didn't get serious with Angular until v4. But I believe your issue is just a bit stricter typing or restructuring of the form classes. AbstractControl is a generic abstract class for these form classes. The FormArray class extends that and adds that controls property that you're looking for. But FormGroup.controls[...] just returns the generic AbstractControl. So, you have to cast it to a FormArray before trying to get the controls from it:

(this.form.controls[control] as FormArray).controls[i].controls...

The more common pattern is to create a getter for the specific arrays, but a simple function in the backing ts file might be more appropriate in your case:

getFormArray(controlName) {
  return this.myForm.get(controlName) as FormArray;
}

answered Jun 26, 2019 at 21:12

Frederick

8926 silver badges14 bronze badges

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

1 Comment

Evan Scott Over a year ago

It looks like FormGroups were being added to FormArrays, hence the form.controls[...].controls[...].controls... calls. Both of your solutions work, however I'm going to try sticking with the more elegant solution of creating get methods. Thanks!

Collectives™ on Stack Overflow

Accessing Nested Controls of Angular Forms

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related