Error : Type 'AbstractControl' is missing the following properties from type 'FormGroup': controls, registerControl, addControl, removeControl,

Question

I have made a weather API web application using android,

Link:- https://stackblitz.com/edit/maximlweatherapp

APP Url:- https://maximlweatherapp.stackblitz.io

I have used the same code in my Visual Studio Code and it is working fine without giving any errors but here in StackBlitz, it is giving errors The only difference in both is that in my Visual Studio, Angular Version 8 is installed but here I am using Angular version 9, Please can anybody see what is the problem with the code and suggest me some changes,

My Working Result from Visual studio Code output

Answer 1

In AOT mode, which is default in Angular 9, template compiler is stricter than in JIT mode.

For example, in the following code:

[formGroup]="checkcity.at(itemindex)"

checkcity.at method returns AbstractControl and it doesn't match type that FormGroupDirective requires.

You can cast it by your own:

html

[formGroup]="getFormGroupAt(itemindex)"

ts

getFormGroupAt(i: number) {
  return this.checkcity.at(i) as FormGroup;
}

Forked Stackblitz

or use built-in $any() function in each place where you're using checkcity.at(itemindex)

$any(checkcity.at(itemindex))