angular 4 reactive forms | model-driven forms | example

Angular 4 Model Driven Forms

• Angular offers two types of forms: template-driven and model-driven

1.It is also called reactive forms.

2.In this approach, we have to add an additional layer of complexity and functionality by having you to declare the model of the form in your component class.

3.We represent the form as a model composed of instances of FormGroups and FormControls.

4.HTML for our form isn’t automatically created for us in model-driven approach.

5.need to write the HTML that represents our form and then explicitly link the HTML form elements to code on our component.

6.We represent the form as a model composed of instances of FormGroups and FormControls.

Example :

Step 1: Create an angular 4 project.(ng new projectname)

Step 2: Add following code into app.component.html

<form [formGroup]="myform">
    <fieldset formGroupName="name">
    <div class="form-group">
    <label>First Name</label>
    <input type="text"
    class="form-control"
    formControlName="firstName"
    required>
    </div>
    <div class="form-group">
    <label>Last Name</label>
    <input type="text"
    class="form-control"
    formControlName="lastName"
    required>
    </div>
    </fieldset>
    <div class="form-group">
    <label>Email</label>
    <input type="email"
    class="form-control"
    formControlName="email"
    required>
    </div>
    <div class="form-group">
    <label>Password</label>
    <input type="password"
    class="form-control"
    formControlName="password"
    required>
    </div>
    <div class="form-group">
    <label>Language</label>
    <select class="form-control"
    formControlName="language">
    <option value="">Please select a language</option>
    <option *ngFor="let lang of langs"
    [value]="lang">{{lang}}
    </option>
    </select>
    </div>
    <pre>{{myform.value | json}}</pre>
  </form>
  <pre>{{myform.value | json}}</pre>

Step3: Update app.module.ts as follows(add reference of reactive form module library)

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: Add Following code into app.component.ts.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  {
  // Create array to populate language dropdown
  langs: string[] = [
      'English',
      'French',
      'German',
    ]
    // Create Formgroup instance
    myform: FormGroup;
    constructor() {
    // here name is group of first name and last name, formgroup may be nested in another form group.
    this.myform = new FormGroup({
    name: new FormGroup({
    firstName: new FormControl(),
    lastName: new FormControl(),
    }),
    email: new FormControl(),
    password: new FormControl(),
    language: new FormControl()
    });
    }
}

 

Output: