Learn How to build a Model-driven forms app in Angular 2

1
6037
model-driven-forms

model-driven-forms

In this chapter, we are going to build a Model-driven forms app in Angular 2.0 by using the following two approaches.
1. FormGroup and FormControl.
2. FormGroup and FormBuilder.

Comparison between template-driven and model-driven form
Both template-driven form and model-driven form differs from each other as the former allows us to write as little JavaScript code as possible to prepare the sophisticated forms and the latter makes the testing of a form easy as it doesn’t require end-to-end testing. It prepares forms imperatively out of the properties on the available components. Model-driven forms are also known as reactive forms and can be thought of as the addition to the template-driven forms such as validators on DOM elements etc.

1. FormGroup and FormControl
The following is the app structure for this type of model-driven form in Angular 2.0

app/main.ts

Explanation of Code:
The above main.ts file is used to Bootstrap the angular 2.0 app that uses the root component from the NgModule.

app/app-module.ts

Explanation of Code:
The root App Module typescript file is present in the app package. Here, we are importing the NgModule, BrowserModule, FormsModule, ReactiveFormsModule, and AppComponent classes as shown above. The @NgModule decorator declared here has imports, declaration classes and bootstrap class to start the app.

app/app-component.ts

Explanation of Code:
It has the selector ‘my-modal-form-app’ which is used on the index.html to load the complete app on the browser. It has the template URL as ‘resource/app-component.html’ and styleUrls as ‘assets/styles.css’ as shown below. In the controller class ‘AppComponent’, we are implementing OnInit interface for the method ‘ngOnInit ()’, where we are using the FormGroup and FormControl classes to create a model-driven form in Angular 2.0. Both FormGroup and FormControl are low level APIs where the FormGroup always represents a set of FormControls. They collectively form the model-driven form in Angular 2.0.

FormGroup: This class is present in the ‘@angular/forms’ package of Angular 2.0. It is used to represent a set of form controls inside its constructor as shown above.
FormControl: This class is present in the ‘@angular/forms’ package of Angular 2.0. Each of the form element defined above has an associated FormControl with it.

Here, we can notice the nested FormGroup i.e. address which has street, zip and city as three form elements associated with the respective FormControl. In order to drive this form model-driven, we need to write the HTML code in the template that represents that DOM structure in our component as shown below.

resource/app-component.html

Explanation of Code:
It is the HTML code template for ‘app-component-ts’. Here, we can notice that this model-driven form has ‘[formGroup]=”registerForm”’, and each of the form element has ‘formControlName’ exactly what we defined in AppComponent class. Also, for the nested FormGroup ‘address’, we have used the ‘fieldset’ tag with the ‘formGroupName’ directive (i.e.).
assets/styles.css

Explanation of Code:
It is the stylesheet used to style the text on the web page of the app.

Index.html

Explanation of Code:
It is the ‘index.html’ file that has the ‘my-modal-form-app’ tag in its body section i.e. selector defined in the ‘app-component’ to load and display the complete application. Here, we are including all the paths for the scripts which are required for the Angular 2.0 build as shown above.

Output
When we run the above angular 2.0 model-driven form app by executing the command ‘npm start’ on command line that has pointer to the application’s root directory ‘angular2-model-driven-forms’ then we will observe the following output.

output1

Source Code for FormGroup and FormControl

2. FormGroup and FormBuilder.
In the last approach of FormGroup and FormControl, we have written FormGroup and FormControl multiple times which makes the code quite verbose. We can reduce the coding effort by the use of a high level API known as FormBuilder. FormBuilder has a .group () method that makes this task very easy and act a factory for the creation of the FormGroup’s and FormControl’s for the form. Therefore, our ‘app-component.ts’ file will look as follows.

app/app-component.ts

Explanation of Code:
Here, we are able to create the form model by using ‘FormBuilder.group()’ in ‘ngOnInit()’ lifecycle as the AppComponent class implements ‘OnInit’ interface. Also, here we are able to initialize the default values to the model-driven form as shown above.

Output
When we run the program, after making this change to ‘app-component.ts’, then we will observe the following output.

output2

Source Code for FormGroup and FormBuilder.

Conclusion:
In this chapter, we have built a model-driven form app in Angular 2.0 by using the FormGroup, FormControl, and FormBuilder classes of ‘@angular/forms’ (i.e. low level and high level APIs).

1 COMMENT

Leave a Reply to sree Cancel reply

Please enter your comment!
Please enter your name here