Reactive Form

Modules

• formGroup
• formControl
• formControlName
• formGroupName
• formArrayName

Typical Reactive Form

student.html

<form (ngSubmit)="save()" [formGroup]="studentForm">
   <div [ngClass]="{'hasError':formError.firstName}">
      <input type="text" 
             formControlName="firstName" />
      <button type="submit">Save</button>
   </div>
</form>

student.component.ts

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

...
export class StudentComponent implements OnInit{
   ...
   ngOnInit(): void {
      this.studentForm  = new FormGroup({
         firstName: new FormControl(),
         lastName: new FormControl(),
         email: new FormControl(),
         sendCatalog: new FormControl(true)
      });
   }
}