Type 'FormGroup<{ name: FormControl<string | null>; }>' is not assignable to type...

I am working on Angular 14, Typescript 4.7, Angualr/forms: 14.3.0.

Below is a minimum error reproducible code snippet.

import { Component } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
selector: 'app-learn',
templateUrl: './learn.component.html',
})
export class LearnComponent {

constructor(private formBuilder: FormBuilder) { }

public form!: FormGroup<IForm>

private buildForm(): FormGroup<IForm> {
const form: FormGroup<IForm> = this.formBuilder.group({
name: new FormControl<string>("Sample Name", Validators.required),
});
return form as FormGroup<IForm>;
}

private createContractModel(): IData {
const formValues = this.form.value;
const contract: IData = {
name: formValues.name as string,
}
return contract;
}
}

interface IForm {
name: FormControl<string>;
}

interface IData {
name: string;
}


I am getting the following error:

Type 'FormGroup<{ name: FormControl<string | null>; }>' is not assignable to type 'FormGroup<IForm>'.
Types of property 'controls' are incompatible.
Type '{ name: FormControl<string | null>; }' is not assignable to type 'IForm'. ts(2322)

Error (TS2322)
FormGroup<{ name: FormControl<string | null> }>' is not assignable to type FormGroup<IForm>.
Types of property controls are incompatible.
Type '{ name: FormControl<string | null> }' is not assignable to type IForm.



And TypeScript also requires me to have type assertion as string, in the code.

How can I resolve the error and not use the type assertion.

Continue reading...