How to use Forms in Angular4

In this blog, we'll see how to use reactive forms in angular4.

We can work with two different types of forms: Template-driven and Reactive forms. In this post, we'll see how to use reactive forms with example.

Angular4 Reactive forms:

Let's create a template form with user required fields

<form>
<div>
  <label>First Name</label>
  <input type="text" name="first_name"/>
</div>
<div>
  <label>Last Name</label>
  <input type="text" name="last_name"/>
</div>
<div>
  <label>Email</label>
  <input type="text" name="email"/>
</div>
<button type="submit">Submit</button>
<button type="button">Cancel</button>
</form>

In the above template, the requirements are

First Name: A unique first name should be provided.

Last Name: A unique last name should be provided.

Email: A valid email id that is unique and is required.

While using reactive forms import ReactiveFormsModule in your app.module.js and BrowserModule is used for bootstrap.

import {NgModule} from '@angular/core'
import {ReactiveFormsModule} from '@angular/forms'
import {BrowserModule} from '@angular/platform-browser'
import { AppComponent } from './app.component';

@NgModule({
 imports: [ BrowserModule, ReactiveFormsModule ],
 declarations: [ AppComponent],
 bootstrap: [ AppComponent ]
})

export class AppModule {}

import FormGroup, FormControl, Validators in your app component(Reactive Form related classes)

  • FormGroup – The value will be an object; Each object element should be a FormControl.
  • FormControl – The value is a string or object; It is the default value of form control
import { FormGroup, FormControl } from '@angular/forms';
import { Component, OnInit } from '@angular/core'

@Component({

selector: 'my-app',
templateUrl: 'src/app.component.html'
})

export class AppComponent implements OnInit {

private sampleForm: FormGroup;

constructor() {}

ngOnInit() {

  // Create new Form control with all your required fields.

  this.sampleForm = new FormGroup({
    'first_name': new FormControl(),
    'last_name': new FormControl(),
    'email': new FormControl(),
  });
}

cancel() {
  console.log(this.sampleForm);
}

onSubmit() {
  console.log('Form successful submit.');
  console.log(this.sampleForm.value);
}

}

In the above example, we have created FormGroup for the fields mentioned, Now we need to assign form object(formGroup, formControlName) to HTML as follows.

<form [formGroup]="sampleForm" (ngSubmit)="onSubmit()">
<div>
  <label>First Name</label>
  <input type="text" name="first_name" formControlName="first_name"/>
</div>
<div>
  <label>Last Name</label>
  <input type="text" name="last_name" formControlName="last_name"/>
</div>
<div>
  <label>Email</label>
  <input type="text" name="email" formControlName="email"/>
</div>
<button type="submit">Submit</button>
<button type="button" (click)="cancel()">Cancel</button>
</form>

When user clicks submit button then onSubmit() function triggers and provides you the form data in console(Here you can perform your logic), the same for the cancel.

Posted On 12 October 2018 By MicroPyramid


About Micropyramid

Micropyramid is a software development and cloud consulting partner for enterprise businesses across the world. We work on python, Django, Salesforce, Angular, Reactjs, React Native, MySQL, PostgreSQL, Docker, Linux, Ansible, git, amazon web services. We are Amazon and salesforce consulting partner with 5 years of cloud architect experience. We develop e-commerce, retail, banking, machine learning, CMS, CRM web and mobile applications.


Need any Help in your Project?Let's Talk

Subscribe To our news letter

Subscribe and Stay Updated about our Webinars, news and articles on Django, Python, Machine Learning, Amazon Web Services, DevOps, Salesforce, ReactJS, AngularJS, React Native.
* We don't provide your email contact details to any third parties