How to Create Custom Form Validator in Angular 8 Application?

Here, I will guide you how to create custom form validator in Angular 8 Application. You will learn to Angular 8 custom validator example step by step. We can simply write custom validation in Angular 8 for reactive form.

Custom validation is a most important thing in programming language. Most of the cases and most of the project you need to create some custom validation so you can reuse it and also write septate code on file then you can use as like pre define validation.

So if you also need to create custom validator in your angular application then follow bellow step to create basic Angular 8 reactive form custom validator.

We will create new custom validator for not contain space on input field. we will not allow space on username. so let’s see now it works

Step 1: Install Angular App

Here, in this step you need to create new ng app for this demo. if you have already created then don’t create new Angular 8 app.

ng new my-custom-val-app

Step 2: Import FormsModule

If you want to create form in angular app then you need to import FormsModule from @angular/forms library. so let’s add following code to app.module.ts file.

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

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

   

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

   

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    FormsModule,

    ReactiveFormsModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

Step 3: Form with ngModel

In this step, we will write code of html form with ngModel. so add following code to app.component.html file.

src/app/app.component.html

<h1>How to Create Custom Validators in Angular 8 - ItSolutionStuff.com</h1>

    

<form [formGroup]="form" (ngSubmit)="submit()">

   

    <div class="form-group">

        <label for="username">Username</label>

        <input 

            formControlName="username"

            id="username" 

            type="text" 

            class="form-control">

        <div *ngIf="f.username.touched && f.username.invalid" class="alert alert-danger">

            <div *ngIf="f.username.errors.required">Username is required.</div>

            <div *ngIf="f.username.errors.minlength">Username should be 3 character.</div>

            <div *ngIf="f.username.errors.cannotContainSpace">Username can not contain space.</div>

        </div>

    </div>

     

    <div class="form-group">

        <label for="password">Password</label>

        <input 

            formControlName="password"

            id="password" 

            type="password" 

            class="form-control">

        <div *ngIf="f.password.touched && f.password.invalid" class="alert alert-danger">

            <div *ngIf="f.password.errors.required">Password is required.</div>

        </div>

    </div>

    

    <button class="btn btn-primary" type="submit">Submit</button>

</form>

Step 4: updated Ts File

In ts file. we will write submit() and get all input fields values. so let’s add following code to app.component.ts file.

src/app/app.component.ts

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

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

import { UsernameValidator } from './username.validator';

  

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  form = new FormGroup({

    username: new FormControl('', [Validators.required, Validators.minLength(3), UsernameValidator.cannotContainSpace]),

    password: new FormControl('', Validators.required)

  });

   

  get f(){

    return this.form.controls;

  }

    

  submit(){

    console.log(this.form.value);

  }

}

Step 5: Create Custom Validation File

You need to create custom ‘username.validator.ts’ file and write code as bellow:

src/app/username.validator.ts

import { AbstractControl, ValidationErrors } from '@angular/forms';

  

export class UsernameValidator {

    static cannotContainSpace(control: AbstractControl) : ValidationErrors | null {

        if((control.value as string).indexOf(' ') >= 0){

            return {cannotContainSpace: true}

        }

  

        return null;

    }

}

Now you can run your application using following command:

ng serve

I hope it can help you…

Originally published by Hardik Savani at https://www.itsolutionstuff.com

#Angular #JavaScript #WebDev

What is GEEK

Buddha Community

How to Create Custom Form Validator in Angular 8 Application?

Yogi Gurjar

1600308055

Laravel 8 Form Validation Tutorial

Laravel 8 form validation example. In this tutorial, i will show you how to submit form with validation in laravel 8.

And you will learn how to store form data in laravel 8. Also validate form data before store to db.

How to Validate Form Data in Laravel 8

  1. Step 1 – Install Laravel 8 Application
  2. Step 2 – Configuring Database using Env File
  3. Step 3 – Create Model & Migration File For Form
  4. Step 4 – Create Routes
  5. Step 5 – Creating Controller
  6. Step 6 – Create Blade File For Form
  7. Step 7 – Start Development Server
  8. Step 8 – Run Laravel 8 Form Validation App On Browser

https://laratutorials.com/laravel-8-form-validation-example-tutorial/

#laravel 8 form validation #laravel 8 form validation tutorial #laravel 8 form validation - google search #how to validate form data in laravel 8 #form validation in laravel 8

Laravel 8 Form Validation Example

In this tutorial we will see laravel 8 form validation example, form validation in laravel is very common functionalities and it is use in each and every website to validate form field.

Here, We will use has function in session to check error message in laravel 8. using this example you can check simple form validation as well as you can create your own custom validation in laravel 8.

Laravel 8 Form Validation Example

https://websolutionstuff.com/post/laravel-8-form-validation-example


Read Also : Laravel 8 CRUD Operation Example

https://websolutionstuff.com/post/laravel-8-crud-operation-example

#laravel 8 form validation example #form validation #how to validate form in laravel 8 #form validation in laravel #laravel #laravel8

I am Developer

1608866530

Angular 11 Reactive Forms Validation Tutorial

Reactive form validation in Angular 11 app. In this tutorial, i will show you how to use reactive form validation in angular 11 app.

As well as, and you will learn how use reactive form validation in angular 11. And also use reactive form with formGroup for validation in angular 11 app.

Reactive Form Validation In Angular 11
Step 1 – Create New Angular App
Step 2 – Import Form Module
Step 3 – Add Code on View File
Step 4 – Use Component ts File
Step 5 – Start Angular App

https://www.tutsmake.com/angular-11-reactive-forms-validation-tutorial-example/

#reactive form validation in angular 11 #angular 11/10/9/8/7 reactive forms validation example #angular 11 form validation example

Yogi Gurjar

1600307723

Laravel 8 Form Example Tutorial - Complete Guide

Laravel 8 form example. In this tutorial, i would love to show you how to create form in laravel. And how to insert data into database using form in laravel 8.

How to Submit Form Data into Database in Laravel 8

  1. Step 1 – Install Laravel 8 Application
  2. Step 2 – Configuring Database using Env File
  3. Step 3 – Create Model & Migration File For Add Blog Post Form
  4. Step 4 – Create Routes
  5. Step 5 – Creating Controller
  6. Step 6 – Create Blade File For Add Blog Post Form
  7. Step 7 – Start Development Server
  8. Step 8 – Run Laravel 8 Form App On Browser

https://laratutorials.com/laravel-8-form-example-tutorial/

#insert form data into database using laravel #laravel bootstrap form #laravel post forms #laravel 8 form tutorial #laravel 8 form example #laravel 8 form submit tutorial

I am Developer

1604492424

Laravel 8 Custom Validation Error Messages Example

Laravel 8 custom validation rules and error messages. In this tutorial, i will show you how to add custom validation rules and display custom validation error messages in laravel 8 app.

Laravel 8 Custom Validation Rule & Error Message Example

  • Step 1 - Install Laravel 8 App
  • Step 2 - Connecting App to Database
  • Step 3 - Run Migration Command
  • Step 4 - Add Routes
  • Step 5 - Generate Controller By Command
  • Step 6 - Create the blade view
  • Step 7 - Run Development Server

https://www.tutsmake.com/laravel-8-custom-validation-error-messages-tutorial/

#laravel custom validation rule with parameters #laravel custom validation message #laravel request validation custom message #laravel custom validation error messages