For those seeking an alternative approach, I stumbled upon this insightful article discussing the concept of strong typing for Angular forms. Here is a brief summary:

interface Person {
  name: string;
  email: string
}

// Defining controls in a form group that will emit a Person as its value
type PersonControls = { [key in keyof Person]: AbstractControl };
type PersonFormGroup = FormGroup & { value: Person, controls: PersonControls };

export class MyFormComponent {
  form = new FormGroup({
    name: new FormControl(),
    email: new FormControl()
  } as PersonControls) as PersonFormGroup;

  initialize() {
    const name = this.form.controls.name; // now strongly typed!
  }
}

Exciting News for 2022 (Angular 14): Enhanced Typed Reactive Forms

Great news with the recent Angular update! Strict types are now available for reactive forms, eliminating the need for workarounds.

If you're using the formBuilder service to create your forms, you can easily assign a strict type like this:

type myType = 'typeA' | 'typeB' | 'typeC';

public myForm = this.fb.control<myType>('typeA');

If you prefer creating a formGroup without relying on the formBuilder service, here's how you can do it:

interface User {
    name: FormControl<string>;
    email: FormControl<string>;
    isAdmin: FormControl<boolean>;
}

public user: FormGroup<User> = new FormGroup<User>({
    name: new FormControl('', {nonNullable: true}),
    email: new FormControl('', {nonNullable: true}),
    isAdmin: new FormControl(false, {nonNullable: true}),
});

Note that not specifying the nonNullable attribute may lead to errors in your template regarding values being null, especially when binding form control values.

Angular now automatically checks the type system even if you don't explicitly define the type, as demonstrated here:

const cat = new FormGroup({
   name: new FormGroup({
      first: new FormControl('Barb'),
      last: new FormControl('Smith'),
   }),
   lives: new FormControl(9),
});

// Type-checking for forms values!
// TS Error: Property 'substring' does not exist on type 'number'.
let remainingLives = cat.value.lives.substring(1);

// Optional and required controls are enforced!
// TS Error: No overload matches this call.
cat.removeControl('lives');

// FormGroups are aware of their child controls.
// name.middle is never on cat
let catMiddleName = cat.get('name.middle');

For more information, check out the Angular 14 release update on their blog here

forms.ts

import { FormControl, FormGroup } from '@angular/forms';

export type ModelFormGroup<T> = FormGroup<{
  [K in keyof T]: FormControl<T[K] | null>;
}>;

login.ts

export interface Ilogin {
  username: string;
  password: string;
}

login.component.ts

loginForm!: ModelFormGroup<Ilogin>;

constructor() {
    this.loginForm = new FormGroup({
      username: new FormControl<string | null>(null, Validators.required),
      password: new FormControl<string | null>(null, Validators.required),
    });
}

Dealing with a similar issue led me to come up with this solution focusing on the type of value within the form rather than the form itself:

export interface UserFormValue {
  first_name: string
  last_name: string
  referral: string
  email: string
  password: string
}
...

ngOnInit() {
  this.userForm = this.fb.group({
    first_name: [ '', Validators.required ],
    last_name: [ '', Validators.required ],
    referral: [ '' ],
    email: [ '', [ Validators.required, Validators.email ] ],
    password: [ '', [ Validators.required, Validators.minLength(8) ] ],
  });
}

...

In the template, submitting the value becomes simpler:

<form [formGroup]="userForm" (ngSubmit)="onSubmit(userForm.value)">
   ...
</form>

Now, adding a type to the submit function enhances clarity:

onSubmit(userForm: UserFormValue) {
   ...
}

While not perfect, this approach has proven effective for my needs. I do wish there was an option like this available:

userForm: FormGroup<UserFormValue>

Exciting news! Angular 14 (currently on the next channel) now supports strictly typed forms!

The FormGroup and FormArray classes are now generic, allowing for type safety within inner controls. The FormControl class also accepts generics for its value type. Additionally, a new class called FormRecord has been introduced for handling dynamic groups of controls.

Check out this example:

const party = new FormGroup({
  address: new FormGroup({
    house: new FormControl(123, {initialValueIsDefault: true}),
    street: new FormControl('Powell St', {initialValueIsDefault: true}),
  }),
  formal: new FormControl(true),
  foodOptions: new FormArray([
    new FormControl('Soup'),
  ])
});

// whichHouse is now strongly typed as `number`
const whichHouse = party.get('address.house')!.value;

// Error: control "music" does not exist
const band = party.controls.music;

Having nested type of groups allows you to handle scenarios like the following:
**models.ts

export type TCreateUserFields = {
    first_name: string,
    last_name: string,
    accept_terms: boolean,
};
export type TPasswordsControls = {
    passwords: FormGroup & {
        password: AbstractControl,
        confirm_password: AbstractControl
    }
}
export type TPasswordsFields = {
    passwords: {
        password: string,
        confirm_password: string
    }
}
export type TAllFields = TCreateUserFields & TPasswordsFields;
export type TAllControls = TCreateUserControls & TPasswordsControls;
export type TCreateUserControls = {
    [key in keyof TCreateUserFields]: AbstractControl
};
export type TCreateUserFormGroup = FormGroup & {value: TAllFields, controls: TAllControls};

this.registerationForm = this.fb.group(
{
    first_name: new FormControl("", [Validators.required]),
    last_name: new FormControl("", [Validators.required]),
    accept_terms: new FormControl(false, [Validators.required]),
    passwords: new FormGroup(
        {
            password: new FormControl("", [Validators.required, Validators.pattern(/^[~`!@#$%^&*()_+=[\]\{}|;':",.\/<>?a-zA-Z0-9-]+$/)]),
            confirm_password: new FormControl("", [Validators.required, Validators.pattern(/^[~`!@#$%^&*()_+=[\]\{}|;':",.\/<>?a-zA-Z0-9-]+$/)]),
        }, { 
            validators: <ValidatorFn>pwdConfirming({key:'password', confirmationKey:'confirm_password'})
        }
    )
} as TCreateUserControls) as TCreateUserFormGroup;

I found a fantastic solution for my project in the form of a library called ngx-strongly-typed-forms. This library offers strongly typed FormControls, FormGroups, and FormArrays which have greatly improved my workflow. While there are some limitations, it has proven to be incredibly helpful.

If you're interested in learning more, check out the documentation at https://github.com/no0x9d/ngx-strongly-typed-forms

In the latest version of Angular, reactive forms have now been made strictly typed by default.

https://angular.io/guide/typed-forms

interface RegistrationForm {
    username: FormControl<string>;
    email: FormControl<string>;
}

const registration = new FormGroup<RegistrationForm>({
    username: new FormControl('', {nonNullable: true}),
    email: new FormControl('', {nonNullable: true}),
});