In this post we’ll see how to create a reactive form in Angular.

• Interested in creating a template-driven form refer this post- Angular Template-Driven Form Example

Importing ReactiveFormsModule

You need to import ReactiveFormsModule into the AppModule (app.module.ts) for Angular Reactive form to work.

Add ReactiveFormsModule in the imports section of the AppModule.

imports: [
  BrowserModule,
  ReactiveFormsModule
],

Angular Reactive Form example

In the example we’ll create a form with two input fields for name and email, a date picker for picking date and a drop down to select one of the option. Once finsihed our form should look something like this-

Data Model

Member class defines the data model reflected in the form.

member.model.ts

export class Member {
  name: string;
  mail: string;
  membershipDate: Date;
  membershipType: string;
  constructor(name: string, mail: string, membershipDate: Date, membershipType: string) {
    this.name = name;
    this.mail = mail;
    this.membershipDate  = membershipDate;
    this.membershipType = membershipType;
  }
}

Component class (app.component.ts)

In ReactiveForm you create the form controls in your code so Component class is the appropriate place to create such controls which you will sync up with the corresponding template.

In Angular form a FormControl represents an individual form control where as Formgroup represents a collection of form controls as a group. So, it is obvious that in your code you will create a FormGroup object and with in that you will add form controls corresponding to fields in the form.

import { DatePipe } from '@angular/common';
import { Component, OnInit} from '@angular/core';
import { FormControl, FormGroup} from '@angular/forms';
import { Member } from './member.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html', 
  providers: [DatePipe]
})
export class AppComponent implements OnInit {
  membershiptypes = ['Silver', 'Gold', 'Platinum'];
  currentDate = new Date();
  member = new Member('', '', new Date(), '');
  submitted = false;
  membershipForm : FormGroup;
  constructor(private datePipe: DatePipe){ }
  ngOnInit() {
    this.membershipForm = new FormGroup({
      memberName: new FormControl(null),
      email: new FormControl(null),
      mdate: new FormControl(this.datePipe.transform(this.currentDate, 'yyyy-MM-dd')),
      membershipType: new FormControl('Silver')
    });
  }
  onSubmit(){
    this.submitted = true;
    this.member.name = this.membershipForm.value.memberName;
    this.member.mail = this.membershipForm.value.email;
    this.member.membershipDate = this.membershipForm.value.mdate;
    this.member.membershipType = this.membershipForm.value.membershipType; 
  }
}

Important points to note here are-

1. You need to import FormControl and FormGroup classes.

2. A reference to FormGroup is created named membershipForm.

3. Using that reference a new FormGroup object is created and an array of form controls are added to that FormGroup object.

4. A FromControl takes three arguments state, Validator and AsyncValidator. In this example we are not going into validation so we’ll pass just one argument. For name and email initial value is passed as null. For date current date is passed as default and for Membership type ‘Silver’ is passed as default.

5. onSubmit() method is called when the form is submitted and the values entered in the form are used to create an object of Member class.

Template (app.component.html)

Membership Form



Name
                 formControlName="memberName">                        


email
          formControlName="email">                        


Membership Date
          formControlName="mdate">                        


Membership Type
          formControlName="membershipType">
{{mtype}}


Submit
 






Name: {{member.name}}

email: {{member.mail}}

Membership Date: {{member.membershipDate | date:'dd/MM/yyyy'}}

Membership Type: {{member.membershipType}}



  

Important points to note here are-

1. You need to tell the template, from where it has to get all the FormControls for the form, that is done by binding the FormGroup reference.

                 formControlName="memberName">