Make angular reactive forms strongly typed.

Reactive forms are complex, Hence they must be strongly typed with the respective model.

This can be achieved through IFormGroup

Let's see how:

1) Install @rxweb/reactive-form-validators

npm i @rxweb/reactive-form-validators

2) Create user model class and declare property of fullName.

import { prop } from "@rxweb/reactive-form-validators"

export class User{

  @prop()
  fullName:string;

}

3) Now create the Component which uses IFormGroup<User> to make your form stronglyTyped with model.

import { Component, OnInit } from '@angular/core';

import { RxFormBuilder,IFormGroup } from '@rxweb/reactive-form-validators';
import { User } from "./user.model"

@Component({
    selector: 'app-user',
    templateUrl: './user.component.html'
})
export class UserComponent implements OnInit {

    userFormGroup: IFormGroup<User>

    constructor(
        private formBuilder: RxFormBuilder
    ) { }

    ngOnInit() {
        this.userFormGroup  = this.formBuilder.formGroup(User) as IFormGroup<User>;
        this.userFormGroup.controls.fullName.setValue("John");
        let fullName = this.userFormGroup.value.fullName;

    }

}

4) Create user form in the HTML:

<div>
    <form [formGroup]="userFormGroup">
        <div class="form-group">
            <label>Full Name</label>
            <input type="text" formControlName="fullName" class="form-control" />
        </div>
    </form>
</div>

Please refer this working example