Below is the interface I am working with:
export interface ILoginDto {
email: string;
password: string;
}
Here is a snippet of the relevant code from the component:
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
export class LoginComponent {
form = this.getLoginForm();
constructor(private readonly fb: FormBuilder) {
}
private getLoginForm(): FormGroup<ILoginDto> {
return this.fb.nonNullable.group({
email: ['', [Validators.email, Validators.required]],
password: ['', [Validators.required]],
});
}
}
I encountered an error in TypeScript:
error TS2344: Type 'ILoginDto' does not satisfy the constraint '{ email: AbstractControl<any, any>; password: AbstractControl<any, any>; }'.
Types of property 'email' are incompatible.
Type 'string' is not assignable to type 'AbstractControl<any, any>'.
18 private getLoginForm(): FormGroup<ILoginDto> {
~~~~~~~~~
Additionally, I received the following error:
error TS2322: Type 'FormGroup<{ email: FormControl<string>; password: FormControl<string>; }>' is not assignable to type 'FormGroup<ILoginDto>'.
Types of property 'controls' are incompatible.
Type '{ email: FormControl<string>; password: FormControl<string>; }' is not assignable to type 'ILoginDto'.
19 return this.fb.nonNullable.group({
~~~~~~
Despite the documentation's guidance on simple interfaces, these errors occurred without explicit control type declarations.
For further exploration of the issue, try out the problem on the TypeScript Playground.