Angular 6 Forms Validation Tutorial Example From Scratch

Today, We want to share with you Angular 6 Forms Validation Tutorial Example From Scratch.In this post we will show you angular-6-reactive-form-validation, hear for Angular 6 – Template-Driven Forms Validation Example we will give you demo and example for implement.In this post, we will learn about Angular 6 Forms Simple Nesting and Input Validation with an example.

Angular 6 Forms Validation Tutorial Example From Scratch

There are the Following The simple About Angular 6 Forms Validation Tutorial Example From Scratch Full Information With Example and source code.

As I will cover this Post with live Working example to develop Angular 6 Form Validation Example Tutorial , so the some major files and Directory structures for this example is following below.

  • Install Angular 6
  • Move Bootstrap 4 in Angular 6.
  • Angular 6 Add ReactiveFormsModule.
  • Angular 6 Add FormGroup and FormControl.
  • Make a angular HTML form.
  • Import module FormBuilder.
  • Add Validation in angular 6.
  • Listing Angular 6 Validation Errors.

Step #1: Install Angular 6

//Angular CLI 
npm install -g @angular/cli

// create a local project
ng new forms

//Start the application
ng serve --open

Step #2: Angular 6 Include Bootstrap 4

npm install bootstrap 4 --save

src >> styles.css >> import the bootstrap.min.css file.
@import "~bootstrap/dist/css/bootstrap.min.css";

Step #3: Import ReactiveFormsModule in Angular 6.

app.module.ts

// app.module.ts

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

imports: [
  BrowserModule,
  ReactiveFormsModule
],

Step #4: Import Angular 6 FormGroup and FormControl.

app.component.ts

// app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  livecrudAngularFrm = new FormGroup ({
    name: new FormControl()
  });
}

Step #5: Make Html a form.

app.component.html

<h2>Angular 6 Forms</h2>
<form [formGroup]="livecrudAngularFrm">
  <div class="form-group">
    <label class="center-block">Name:
      <input class="form-control" formControlName="name">
    </label>
  </div>
</form>

Save angular 6 the file as well as run this Example go to the: http://localhost:4400/

Step #6: Angular 6 Import FormBuilder module.

app.component.ts

// app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  livecrudAngularFrm = new FormGroup ({
    name: new FormControl()
  });
  constructor(private fb: FormBuilder) {
    this.setupLiveangularForm();
  }
  setupLiveangularForm() {
    this.livecrudAngularFrm = this.fb.group({
      name: '',
    });
  }
}

Step #7:Angular 6 Insert Validation.

app.component.ts

// app.component.ts

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

// app.component.ts

setupLiveangularForm() {
    this.livecrudAngularFrm = this.fb.group({
      name: ['', Validators.required ],
    });
}

Step #8: Angular 6 Form Validation Errors.

app.component.html

<!-- app.component.html -->

<div class="container">
    <h1>
     Angular 6 Forms Validation Tutorial Example From Scratch
    </h1>
    <form [formGroup]="livecrudAngularFrm" novalidate>
          <div class="form-group">
              <label>User Name:</label>
              <input class="form-control" formControlName="name" type="text">
          </div>
          <div *ngIf="livecrudAngularFrm.controls['name'].invalid && (livecrudAngularFrm.controls['name'].dirty || livecrudAngularFrm.controls['name'].touched)" class="alert alert-danger">
              <div *ngIf="livecrudAngularFrm.controls['name'].errors.required">
                User Name is required.
              </div>
          </div>
          <button type="submit"
              [disabled]="livecrudAngularFrm.pristine || livecrudAngularFrm.invalid" class="btn btn-success">
              Save
          </button>
    </form>
    <br />
  </div>

Angular 6 CRUD Operations Application Tutorials

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Angular 6 Forms Validation Tutorial Example From Scratch.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.


Related FAQ

Here are some more FAQ related to this Article:

  1.   Laravel 6 Get All query string parameters
  2.   Append PHP HTML code using jQuery AJAX
  3.   Angular 6 Form Validation Example Tutorial
  4.   Convert JavaScript Array to JSON Example
  5.   Call Function in ng-click Event using Angular Example
  6.   Get Radio Button value using AngularJS
  7.   Form Validations using Angular Example
  8.   Rendering Lists in VueJs Example
  9.   Angular 6 Reactive Forms Validation Tutorial Example
  10.   Laravel 6 Display Message box