angular 8 reactive forms,angular 8 template driven forms validation, template driven forms angular 8 example, template driven forms in angular 8, template driven forms email validation angular 8, angular8 form validation, template driven form ngmodel angular 8, template driven forms formgroup angular 8, template driven forms angular 7, template driven forms angular 4, template driven form example in angular 4, template driven form example in angular 7, template driven form example in angular 2, template driven form example angular 5, template driven form example in angular, angular template driven forms email validation, angular template driven forms error, template driven forms formgroup, template driven forms formarray, angular template driven forms formarray, template driven form get value, angular template driven forms get value, angular formgroup template driven, angular template driven form get control, template driven forms in angular 4, template driven forms in angular 6 example, template driven forms in angular 5, template driven forms in angular2, template driven forms angular 5, template driven forms in angular example, template driven form ngmodel, template driven form set value

Angular 8 Reactive Forms Tutorial with Examples

In this tutorial, we are going to learn how to use Reactive Forms and their validations in angular 8. Before proceeding next please update your node js version to 10.16 and above to use angular 8.

Reactive Forms (or model-driven)

The Reactive Forms in angular 8 use the FormControl, FormGroup and FormBuilder classes provided by ReactiveFormsModule module.

Now let’s start Reactive Forms with an example. In this example, we will register users through our angular 8 application.

First, import ReactiveFormsModule Module in your src/app/app.module.ts file.


    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],
      providers: [],
      bootstrap: [AppComponent],
    })
    class AppModule {}

    

Next, create a new component named reactiveform and import the FormControl,FormGroup,FormBuilder and Validators classes in the src/app/reactiveform.component.ts file.

Generating form controls with FormBuilder

Import the FormBuilder class from the @angular/forms package.


  import { FormBuilder } from '@angular/forms';

And inject this dependency by adding it to your component constructor.


  constructor(private fb: FormBuilder) { }

The FormBuilder service provide us three methods: control(), group(), and array(). I have Created form controls using FormBuilder because Creating form control instances manually is a repetitive task, especially when dealing with multiple forms. In below code snippet, I have created an instance of FormGroup class with four form controls First Name, Last Name, email, and password.


import { Component, OnInit } from '@angular/core';

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

@Component({
  selector: 'app-reactiveform',
  templateUrl: './reactiveform.component.html',
  styleUrls: ['./reactiveform.component.css']
})
export class ReactiveformComponent implements OnInit {

 constructor(private formBuilder: FormBuilder) { }

 UserRegForm = this.formBuilder.group({
            firstName: ['', Validators.required],
            lastName: ['', Validators.required],
            email: ['', [Validators.required, Validators.email]],
            password: ['', [Validators.required, Validators.minLength(8)]]
        });

  ngOnInit() {
  }

Create Form to submit data and form validation


<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3">
<h2>Angular 8 Reactive Form Example With Validation</h2>
<form [formGroup]="UserRegForm" (ngSubmit)="onSubmit()">
<div class="form-group">
                        <label>First Name</label>
                        <input type="text" formControlName="firstName" class="form-control" [ngClass]="{ 'is-invalid': submitform && Form.firstName.errors }" />

<div *ngIf="submitform && Form.firstName.errors" class="warning">
<div *ngIf="Form.firstName.errors.required">First Name is required</div>

</div>

</div>
<div class="form-group">
                        <label>Last Name</label>
                        <input type="text" formControlName="lastName" class="form-control" [ngClass]="{ 'is-invalid': submitform && Form.lastName.errors }" />

<div *ngIf="submitform && Form.lastName.errors" class="warning">
<div *ngIf="Form.lastName.errors.required">Last Name is required</div>

</div>

</div>
<div class="form-group">
                        <label>Email</label>
                        <input type="text" formControlName="email" class="form-control" [ngClass]="{ 'is-invalid': submitform && Form.email.errors }" />

<div *ngIf="submitform && Form.email.errors" class="warning">
<div *ngIf="Form.email.errors.required">Email is required</div>
<div *ngIf="Form.email.errors.email">Email must be a valid email address</div>

</div>

</div>
<div class="form-group">
                        <label>Password</label>
                        <input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitform && Form.password.errors }" />

<div *ngIf="submitform && Form.password.errors" class="warning">
<div *ngIf="Form.password.errors.required">Password is required</div>
<div *ngIf="Form.password.errors.minlength">Password must be at least 8 characters</div>

</div>

</div>
<div class="form-group">
                        <button [disabled]="loading" class="btn btn-primary">Register</button>
                    </div>

</form>

</div>

</div>

</div>

Now create onSubmit() function to your component.ts file and declare submitted property before constructor function. I have also declare a getter function to easy access the form control. Check below complete Code Snippet:-


import { Component, OnInit } from '@angular/core';

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

@Component({
  selector: 'app-reactiveform',
  templateUrl: './reactiveform.component.html',
  styleUrls: ['./reactiveform.component.css']
})
export class ReactiveformComponent implements OnInit {

 submitform= false;

 constructor(private formBuilder: FormBuilder) { }
  UserRegForm = this.formBuilder.group({
            firstName: ['', Validators.required],
            lastName: ['', Validators.required],
            email: ['', [Validators.required, Validators.email]],
            password: ['', [Validators.required, Validators.minLength(8)]]
        });
  ngOnInit() {

  }

get Form() { return this.UserRegForm.controls; }

  onSubmit() {
    this.submitform = true;
    if (this.UserRegForm.invalid) {
        return;
    }
 }

}

Output:-

See also Angular 7 Forms Tutorial with Examples
How to send an http get request to Rest API server in Angular 7
How to render html in node js

Post Created 37

Leave a Reply

Related Posts

Begin typing your search above and press enter to search. Press ESC to cancel.

Back To Top