Home » Angular 6 Form Validation Example Tutorial

Angular 6 Form Validation Example Tutorial

Today, We want to share with you Angular 6 Form Validation Example Tutorial.In this post we will show you Angular 6 – Reactive Forms Validation Example, 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 Validation Tutorial Example From Scratch with an example.

Angular 6 Form Validation Example Tutorial

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

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

Angular Form Validation Tutorial

app
--app.component.html
--app.component.ts
--app.module.ts
-index.html
-main.ts
-polyfills.ts

Angular 6 Reactive Form Validation
Angular 6 Reactive Form Validation

Angular 6 Example

Angular Latest My Previous Post With Source code Read more…..

  1. Angular 6 Folder Project Structure
  2. Angular 6 CLI Installation
  3. Angular 6 Module File
  4. Angular 6 Components
  5. Angular 6 Services
  6. Angular 6 Routing
  7. Angular 6 CSS
  8. Angular 6 Class Binding
  9. Angular 6 Animation
  10. Angular 6 Templating
  11. Angular 6 HTTP Client

Step 1 : Angular 6 Reactive forms

index.html

<!DOCTYPE html>
<html>
<head>
    <base href="/" />
    <title>Angular 6 Form Validation Example Tutorial</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Include bootstrap css -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <app>Loading...</app>
</body>
</html>

Step 2 : Template-driven Angular 6 forms

main.ts

import './polyfills';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

Step 3 : polyfills in Angular 6

/polyfills.ts

import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';

Step 4 : Angular 6 Create a form with Validation

/app/app.component.html

<!-- Angular 6 with Laravel main app container -->
<div class="pakainfo jumbotron">
    <div class="pakainfo container">
        <div class="pakainfo row">
            <div class="pakainfo col-md-6 offset-md-3">
                <h3>Angular 6 Reactive Form Validation</h3>
                <form [formGroup]="membersForm" (ngSubmit)="onSubmit()">
                    <div class="pakainfo form-group">
                        <label>Member Name</label>
                        <input type="text" formControlName="memberfName" class="form-control pakainfo" [ngClass]="{ 'is-invalid': submitted && validfrm.memberfName.errors }" />
                        <div *ngIf="submitted && validfrm.memberfName.errors" class="invalid-feedback">
                            <div *ngIf="validfrm.memberfName.errors.required">Member Name is required</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Member Sir Name</label>
                        <input type="text" formControlName="memberlName" class="form-control pakainfo" [ngClass]="{ 'is-invalid': submitted && validfrm.memberlName.errors }" />
                        <div *ngIf="submitted && validfrm.memberlName.errors" class="invalid-feedback">
                            <div *ngIf="validfrm.memberlName.errors.required">Member Sir Name is required</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Email</label>
                        <input type="text" formControlName="email" class="form-control pakainfo" [ngClass]="{ 'is-invalid': submitted && validfrm.email.errors }" />
                        <div *ngIf="submitted && validfrm.email.errors" class="invalid-feedback">
                            <div *ngIf="validfrm.email.errors.required">member Email is required</div>
                            <div *ngIf="validfrm.email.errors.email">member 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 pakainfo" [ngClass]="{ 'is-invalid': submitted && validfrm.password.errors }" />
                        <div *ngIf="submitted && validfrm.password.errors" class="invalid-feedback">
                            <div *ngIf="validfrm.password.errors.required">Password is required</div>
                            <div *ngIf="validfrm.password.errors.minlength">Password must be at least 6 characters</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary">Signup</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<h2><a href="https://stackblitz.com/edit/angular-6-reactive-form-validation" target="_blank" alt="Angular 6 simple Form Validation Example Tutorial" title="Angular 6 simple Form Validation Example Tutorial">Angular 6 simple Form Validation Demo</a></h2>
<!-- credits -->
<div class="text-center">
    <p>
        <a href="https://www.pakainfo.com/angular-6-form-validation-tutorial/" target="_top">Angular 6 - Reactive Forms Validation Example</a>
    </p>
    <p>
        <a href="https://www.pakainfo.com" target="_top">pakainfo.com</a>
    </p>
</div>

Step 5 : Import FormGroup and FormControl in Angular 6

/app/app.component.ts

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

@Component({
    selector: 'app',
    templateUrl: 'app.component.html'
})

export class AppComponent implements OnInit {
    membersForm: FormGroup;
    submitted = false;

    constructor(private formBuilder: FormBuilder) { }

    ngOnInit() {
        this.membersForm = this.formBuilder.group({
            memberfName: ['', Validators.required],
            memberlName: ['', Validators.required],
            email: ['', [Validators.required, Validators.email]],
            password: ['', [Validators.required, Validators.minLength(6)]]
        });
    }

    // convenience getter for easy access to form fields
    get validfrm() { return this.membersForm.controls; }

    onSubmit() {
        this.submitted = true;

        // stop here if form is invalid
        if (this.membersForm.invalid) {
            return;
        }

        alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.membersForm.value))
    }
}

Step 6 : Import ReactiveFormsModule in Angular 6

/app/app.module.ts

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

import { AppComponent } from './app.component';

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

export class AppModule { }

Angular 6 simple Form Validation Demo

Read Also:  Angular 6 Features Architecture Overview

Read :

Angular 6 CRUD Operations Application Tutorials

Summary

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

I hope you get an idea about Angular 6 Form Validation Example Tutorial.
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.

Read Also:  Angular 6 Folder Project Structure

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  jQuery AJAX laravel 6 Delete Data from database
  2. Read Also:  Laravel Import CSV File into MySQL Example
  3. Read Also:  angular 6 tutorial for beginners step by step
  4. Read Also:  PHP Laravel Full Text Search in MYSQL Database
  5. Read Also:  AngularJS Arrays - tips, tricks and examples
  6. Read Also:  Angular 6 HTTPClient GET Request Example
  7. Read Also:  $event Object as Parameter using Angular Example
  8. Read Also:  Angular 6 HTTP Get Method with Example
  9. Read Also:  Laravel 5.7 Image File Validator Validation
  10. Read Also:  javascript objects vs arrays vs JSON Data Types

Leave a Comment

Your email address will not be published. Required fields are marked *