ngx-formly: Type 'AbstractControl' is not assignable to type 'FormControl'

Description

Using strict template checking prints Type 'AbstractControl' is not assignable to type 'FormControl'.ngtsc(2322), because the FormControlDirective requires a FormControl not AbstractControl. Is there a reason why AbstractControl was used as the control type? I think it would change a lot because we always only push FormControls to an input.

Minimal Reproduction

<input matInput [formControl]="formControl" />

  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }

Your Environment

Angular version: latest
Formly version: latest

Additional context Add any other context about the problem here.

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 17 (6 by maintainers)

Commits related to this issue

feat(core): add support of strictTemplates in FieldType fix #2842 — committed to aitboudad/ngx-formly by aitboudad 2 years ago
feat(core): add support of strictTemplates in FieldType fix #2842 — committed to aitboudad/ngx-formly by aitboudad 2 years ago
feat(core): add support of strictTemplates in FieldType (#3139) fix #2842 — committed to ngx-formly/ngx-formly by aitboudad 2 years ago
feat(core): add support of strictTemplates in FieldType fix #2842 — committed to aitboudad/ngx-formly by aitboudad 2 years ago
feat(core): add support of strictTemplates in FieldType fix #2842 — committed to aitboudad/ngx-formly by aitboudad 2 years ago

Most upvoted comments

@Allcharles here is my solution:

- import { FieldType } from '@ngx-formly/core';
+ import { FieldType, FieldTypeConfig } from '@ngx-formly/core';
@Component({
  template: `<input [formControl]="formControl" />`,
})
- export class CustomFieldType extends FieldType {}
+ export class CustomFieldType extends FieldType<FieldTypeConfig> {}

In addition FieldTypeConfig which expect formControl property to be instance of FormControl, you may use:

FieldGroupTypeConfig: expect formControl property to be instance of FormGroup.
FieldArrayTypeConfig: expect formControl property to be instance of FormArray.

please let me know your opinion 🙏!

aitboudad on Sep 14, 2022

@aitboudad This solution may need an update in version 6 as you used a getter instead. My current workaround is to add the following to my code (although there may be a much cleaner solution):

Option A:

public get control() {
  return this.formControl as FormControl;
}

Option B:

  public asFormControl = (formControl: AbstractControl): FormControl =>
    formControl as FormControl;

Allcharles on Oct 1, 2021

I ran into a similar problem but if you add public formControl: FormControl; to your component definition it resolves it.

scatcher on May 19, 2021