Reactive Forms

1. Reactive forms are provided model-driven technique to handling form inputs whose values changes any time. It is created in component class in the setup of form model. Its predictability is synchronous and structured data model.
2. Reactive forms are robust, scalable, reusable and testable. If forms are part of your applications or you are already use reactive form design for making your application then use reactive forms.

Reactive forms are built on the following base classes of the Form Model.

Form Group: route the similar value and status for collection of form control.

Form Control: route the value and validation status of individual form control.

Form Array: route the same value and status for an array of form control. 

With reactive from, you mention the form model directly in the component class.

There are three steps to using form controls.

Enter the reactive forms module in your application. This module is communicating the reactive-form directives that you need to use reactive forms.

Generate a new Form Control sample and save it in the component.

Lodge the form control in the template. 

1. To use reactive form controls, import ReactiveFormModule from the @angular/forms packages and add it to your ng module’s that imports array.
2. App.module.ts:

Import { Reactive FormsModule } from ‘@angular/forms’

@NgModule({ imports: [ ReactiveFormsModule ] , } ) then, export class AppModule{}

3. Generate the new form control to apply the reactive forms.

ng generate component forms (component name)

4. To register form control, import the form control class and create the new sample of Form control to save a class property.

Forms.component.ts

Import { Reactive FormsModule } from ‘@angular/forms’

 And, inside the export class add 

name = new formcontrol(‘’);

5. After you create the control in the component class, you must identify it with a form control element in the template. Reform the template with the form control using form control binding that provided by form Control directives, which is also included in the Reactive form Module. 

In forms.component.html

Inside the form you mention:

<Label>Name</label>

<input type=”text” [form Control] =”name>
This is the concept of Reactive forms in Angular. If you are interested to learn more details then you go through our website o7services.com. We are providing an Angular online/offline course in Jalandhar. We are also providing angular training in Jalandhar.