Property 'controls' does not exist on type 'AbstractControl'. Angular 7

Question

I keep getting the same build error when I run ng build -aot
The build error says Property 'controls' does not exist on type 'AbstractControl'.

My Form looks like this component.ts

And the HTML look like this component.html

Answer 1

That's a lot of chaining!

FromGroup has an attribute of the form controls: { [key: string]: AbstractControl; }. This means that, in your HTML, when you write createUserForm.controls.password, the AOT compiler understands that it is an object of type AbstractControl - which, in turn, does not declare an attribute named controls!

Right now, there's no way for the compiler to understand that your password group is an actual FormGroup - all it understands is that it is an AbstractControl(which may be a control, a group or an array). In order to show the AOT compiler that password is, in fact, a group, you can declare a helper getter in your component file:

get passwordGroup(): FormGroup { return this.createUserForm.controls.password as FormGroup; }

and then you can go to your HTML file and properly find your subcontrols:

<app-validation-messages [control]="passwordGroup.controls.password" ></app-validation-messages>

All that said, I personally dislike the use of nested groups and controls like that. You could have instead made your app-validation-messages component implement the ControlValueAccessor interface as well as make it provide the NG_VALUE_ACCESSOR token. Doing that, you can then control the value using the formGroupName and formControlName directives:

<div formGroupName="password">
  <app-validation-messages formControlName="password"></app-validation-messages>
</div>