Property 'controls' does not exist on type 'AbstractControlState<T>'

[philjones88]

Got back from holiday and upgraded to Angular 5.0.5 and Angular CLI 1.5.5 as they've fixed a few issues I had with building in AOT and I thought I'd give it another go.

I get these errors:

Error at /Users/phil/Documents/Projects/vq/src/src/app/foo/components/template-form/template-form.component.html(95,5): Property 'controls' does not exist on type 'AbstractControlState<TemplateEntry<number>>'.

Strangly for this one module but not the others that use NGRX-Forms.

I suspect it might be due to the convulted typings that I have to use to match the API?

The component accepts the FormGroupState as an @Input():

  @Input()
  public template: FormGroupState<TemplateViewModel>;

and the template looks like:

  <input type="number"
    [disabled]="template.value.allowWrite === false"
    [ngrxFormControlState]="template.controls.foo.controls.value">

the model is a little convulted:

export class TemplateViewModel {
    public allowWrite: boolean;

    public foo: TemplateEntry<number> = new TemplateEntry<number>(0);
}

export class TemplateEntry<T> {
    public value: T;

    public allowEdit = false;

    constructor(val?: T, allow: boolean = false) {
        this.value = val;
        this.allowEdit = allow;
    }
}

Any ideas?

[MrWolfZ]

The problem is due to the typing of the controls property. Each child control is typed as AbstractControlState which does not have a controls property itself. The reason for this is lack of support for conditional mapped types in TypeScript. There is a proposal open for this for a long time. So when you write template.controls.foo.controls during AoT it determines that the type of foo is AbstractControlState, which leads to the issue described above.

The recommended workaround is to expose a method or get property fooFormState on the component that returns the properly casted state, e.g.

get fooFormState() { return cast(this.template.controls.foo); }

and then fooFormState.controls in the template.

[philjones88]

Thanks for the workaround, is this the issue you are talking about?

microsoft/TypeScript#12424

[MrWolfZ]

Yes, that's the one.