Angular: Cross-field validation for Reactive Forms

In my previous article, I covered the creation of a custom form control validator for my Angular Reactive Form.

Even though, form control validators are very powerful, sometimes are not enough. Imagine a case where you need to validate more than one control at a time. For example, when you have a registration form and you have to check, if the _password_ and _password_confirm_ fields are matching.

Create a custom Form Validator

Let’s start by creating a new file. I recommend that you create a new folder where you keep all your validators.

First of all, I will create and export an arrow function that accepts a FormGroup parameter and returns a ValidatorFn.

With this parameter we are now able to validate more than one controls and, of course, compare their values.

const function passwordMatchValidator(form: FormGroup): ValidatorFn {
   const password = form.controls['password'].value;
   const password_confirm = form.controls['password_confirm'].value;

   if (!password || !password_confirm) {
      return null;
   }
   return (password === password_confirm) ? null : {mismatch: true};
}

#reactive-forms #angular

What is GEEK

Buddha Community

Angular: Cross-field validation for Reactive Forms

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

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

Step 1 – Install Laravel 8 Application
Step 2 – Configuring Database using Env File
Step 3 – Create Model & Migration File For Form
Step 4 – Create Routes
Step 5 – Creating Controller
Step 6 – Create Blade File For Form
Step 7 – Start Development Server
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

websolution stuff

1623216000

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

Edison Stark

1600058040

Angular: Creating custom validator for Reactive Form field

Angular’s popular Reactive Forms functionality comes with a Validator class that contains some very basic built-in validators for form fields, such as required, email, minLength and maxLength. But sometimes we need to validate more complex rules that cannot be covered with the basic ones.

Fortunately, it is very easy to create and assign a custom validator to a form field.

Example case

I want to create a form that contains a custom reactive form field to accept phone numbers. You can see how to create a custom reactive form field with Material Design here.

My field has two parameters: the country and the actual phone number.

When I choose a country from the dropdown, my program converts this country into a country code.

For example: 30 for Greece, 81 for Japan, 1 for USA etc

Example phone number object:

{
   "country_code" : "30", 
   "national_number" : "2123456789", 
   "flag_class" : "gr"
}

I want to create a validator that checks if country code exists and if the number entered is a valid number for this country.

Image for post

#validator #angular #reactive-forms

Chandler Erdman

1602679200