Model Driven Forms In Angular

Now we are going to talk about model driven forms, we already discussed what template driven form is in our previous article,

Template driven forms in Angular 4

I have opened the same solution that I explained in my previous article, and I have app.component.ts with onsubmit function and I have html elements in app.component.html.

Now we are going to convert template driven form into model driven forms; model driven forms are more powerful and more flexible.

There are some things that we can't do with template driven form but with model driven form we can perform those things. Like if we want to detect if any changes occur in any variable we can do it with model driven form , we can easily do two-way data binding with model drivven forms and that is very important in large applications.

So let's do it and convert it into model driven form now.

You can see that in app.module.ts file, we have FormsModule in it, replace it with ReactiveFormsModule as below,

Before

import {
BrowserModule
} from '@angular/platform-browser';
import {
NgModule
} from '@angular/core';
import {
FormsModule
} from '@angular/forms';
import {
AppComponent
} from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule
],
bootstrap: [AppComponent]
})
export class AppModule {}

After

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ReactiveFormsModule
],
bootstrap: [AppComponent]
})
export class AppModule{}

Now lets come back to app.component.ts file,we need to import two more libraries

Form Group
Form Control

Form Group contains the instance of whole form that is in our HTML.

Form Control is the individual element with which we are binding our component.

So I am going to write import as below,

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

Now in our app.component, we first need to add a form class and after that we need to define a function in order to detect if any of the elements in html changed or not.

And we are going to change the way of binding with HTML elements. So, there are many functions in Angular 4 but most important one is ngOnInit.

Code Snippet

ngOnInit() {
this.form = new FormGroup({
firstname: new FormControl(""),
lastname: new FormControl(""),
languages: new FormControl(""),
})
}

Inside the form group constructor, it requires an object of all the form controls that are required for binding in our html, we know that we have three elements in html for binding.

So we defined an object and as property value pairs we defined three form components as shown above in code snippet (a).

ngOnInt will be initialized and will be called whenever we initialize the form inside HTML.

Now we have to change the binding a bit in our HTML.

Binding in Template driven form

Code

<form class="container" #userForms="ngForm" (ngSubmit)="onsubmit(userForms.value)"> <input type="text" name="firstname" placeholder="FirstName" ngModel><br> <input type="text" name="lastname" placeholder="LastName" ngModel> <br> <select name="programming" ngModel>
<option value="C#">C#</option>
<option value="VB.net">VB.net#</option>
<option value="Anugular">Angular#</option>
</select> <br><br><br> <input type="submit" value="submit"> </form>

We can see that we used ngForm and for the binding of individual element we use ngModel and we called onSubmitFunction and sent out the userForm.Value for sending all the values of all these input elements.

So, we need to change the way we bind in individual input elements, remove ngModel and write formControlName and give a name called formcomponent as written below,

Code

<form class="container" #userForms="ngForm" (ngSubmit)="onsubmit(userForms.value)">
<input type="text" name="firstname" placeholder="FirstName" formControlName="firstname">
<br>
<input type="text" name="lastname" placeholder="LastName" formControlName="lastname">
<br>
<select name="programming" formControlName="programming">
<option value="C#">C#</option>
<option value="VB.net">VB.net#</option>
<option value="Anugular">Angular#</option>
</select> <br><br><br> <input type="submit" value="submit"> </form>

And now I need to change #userForm to formGroup as below,

Before

<form class="container" #userForms = "ngForm" (ngSubmit) = "onsubmit(userForms.value)">

After

<form class="container" [formGroup] = "form" (ngSubmit) = "onsubmit(form.value)">

Save the file and run the application using ng serve command and results are as below,

Output

So there are a few more things in model driven forms and as I mentioned at the start, we can detect a change occurs in Angular 4 model driven forms.

Thanks for reading my article.