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


Need any Help in your Project?Let's Talk

Latest Comments
Related Articles
Angular 2 - Getting Started

Angular 2 - Getting Started
Angular 2 is an open source Javascript framework to build web applications or single page applications in HTML and Javascript. ...

Continue Reading...
Implementing Angular Permissions using Route AuthGuards

Implementing Angular's AuthGuards to protect access to the client side routes

Continue Reading...
Introduction to Angular2 to build client-side applications

introduction to angular2 to build client side applications with different components

Continue Reading...
open source packages

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