Primeng: update angular11 reactive from error Type 'AbstractControl' is not assignable to type 'FormControl'

[luoxiao-xy]

After angular11, stricttemplates will be added to tsconfig by default
"angularCompilerOptions": { "strictInjectionParameters": true, "strictInputAccessModifiers": true, "strictTemplates": true }
The checkbox component of primeng uses reactive forms
` name="group1"
value="San Francisco"
[formControl]="myFormGroup.controls['cities']"
inputId="sf"

An error will be reported when starting: Type 'AbstractControl' is not assignable to type 'FormControl'.`
But primeng recommends it.
https://primefaces.org/primeng/showcase/#/checkbox

I made a demo project:
https://github.com/luoxiao-xy/primeng-checkbox-demo-error
Welcome clone to come down and have a look. What's the problem!

[MyKindfu]

bad bug

[kakarias]

same for Angular v10 version and PrimeNg v10 with

"angularCompilerOptions": { "fullTemplateTypeCheck": true, "strictTemplates": true }

it throws compile error

[FabienDehopre]

This also impacts all the input properties of (almost) all the components. If an input property is bound to a an object property that can be null or undefined, the compiler complains about the type not being assignable.

error TS2322: Type 'string | undefined' is not assignable to type 'string'.
  Type 'undefined' is not assignable to type 'string'.

24         [styleClass]="styleClass"
           ~~~~~~~~~~~~~~~~~~~~~~~~~

[SpiralUp]

I managed to have a working checkbox when I replace [formControl] with formControlName + value. For example:

` class="form-control"
formControlName="rememberMe"
value="rememberMe"
[binary]="true"

`

It is not according to primeng recommendations, but it works for me (in Angular 11).

[rsjunior]

Same here.

[lauratondi]

I managed to fix the error by adding:

"compilerOptions": {
"strictPropertyInitialization": false,
}

"angularCompilerOptions": {
"enableIvy": false
}

[mafina]

can you guys try this ?
termsAgreed: [false, Validators.requiredTrue] <---- requiredTrue / False

also my strictPropertyInitialization is set to false.

[khalid7487]

just disable strictTemplates in your tsconfig

"strictTemplates": false

[luoxiao-xy]

@khalid7487 @houcemlaw I know how to configure it！It is proposed to solve this problem, not to avoid it. After all, the default configuration of angular is now. It has to be solved in the end

[sengmann]

You could use the pseudo cast function https://angular.io/guide/template-typecheck#disabling-type-checking-using-any

html <p-checkbox name="group1" value="San Francisco" [formControl]="$any(myFormGroup).controls['cities']" inputId="sf" ></p-checkbox>

[lightbulb110]

You could use the pseudo cast function https://angular.io/guide/template-typecheck#disabling-type-checking-using-any

<p-checkbox name="group1" value="San Francisco" [formControl]="$any(myFormGroup).controls['cities']" inputId="sf" ></p-checkbox>```

Looks like this fixes the compiler error. However ".setValue(true)" still does not work

[developernader]

I use vs code,
I create this FormGroup

myForm = new FormGroup({
name: new FormControl(''),
age: new FormControl(''),
address: new FormControl(''),
Job: new FormControl('')
});

shows an error in age, address, job
ERROR in src/app/client/client.component.ts:14:24 - error TS2345: Argument of type 'string' is not assignable to parameter of type '{ [key: string]:
AbstractControl; }'.
14 age: new FormGroup(''),
~~
src/app/client/client.component.ts:15:28 - error TS2345: Argument of type 'string' is not assignable to parameter of type '{ [key: string]: AbstractControl; }'.
15 address: new FormGroup(''),
~~
src/app/client/client.component.ts:16:24 - error TS2345: Argument of type 'string' is not assignable to parameter of type '{ [key: string]: AbstractControl; }'.
16 job: new FormGroup(''),

I just remove these three controls and write it again working well.