Angular 6 Forms Validation Tutorial Example From Scratch

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.

  Angular Cascading Dropdown Example With Demo

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/

  C# Named Arguments Tutorial with Examples

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 :

  Laravel Logging an Array Example

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.

Leave a Reply

avatar
  Subscribe  
Notify of