Mastering TypeScript 3 - Third Edition

Using Reactive forms

In order to use Reactive forms in our AppComponent, we will need to set up a new FormGroup property, and include the FormBuilder class as part of our constructor function, as follows:

import { FormBuilder, FormGroup, FormControl } from '@angular/forms'; 
... existing code 
export class AppComponent { 
    .. existing properties  
 
    reactiveFormGroup: FormGroup; 
 
    constructor(private formBuilder: FormBuilder) { 
 
    } 
 
    ... existing code 
} 

Here, we have updated our app.component.ts file with an import of the FormBuilder, FormGroup, and FormControl classes from the Angular framework. We then create a new property on our component class named reactiveFormGroup, which is of type FormGroup. This property will house the internal structure for ...