#reactive forms

Angular HTTP

Angular Reactive Forms

Angular Performance Optimization

Angular Shopping Store

 — — — — — — — — — — — — — — — — — — — — — — — — — — -

Join our affiliate program to promote Angular and React courses.

You will only receive money when sales are made, and these should be through your link. Then you will receive 45% commission.

Sign up:

New Post has been published on https://is.gd/TbyeIX

Reactive Form Validation In Angular

Reactive Form Validation By Sagar Jaybhay

When we create reactive forms we don’t use html5 validation attributes rather than we use form validator which we assign when we create form group controls.

import Component from '@angular/core'; import FormGroup,FormControl, Validators from '@angular/forms'; @Component( selector: 'signup-form', templateUrl: './signup-form.component.html', styleUrls: ['./signup-form.component.css'] ) export class SignupFormComponent form=new FormGroup( username:new FormControl('initialValue',Validators.required), password:new FormControl('initialvalue',Validators.required) )

In this we use Validator class in which static methods are defined like required,email,min, max length etc. first parameter to FormControl is initial value or default value which we want to set.

For this validator class we need to import this validator from angular/forms.

All About Reactive Forms – Link

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

How to add multiple validators in ReactiveForms angular?

FormControl class in which second parameter takes validator or validatorfn as input parameter.

form=new FormGroup( username:new FormControl('',[Validators.required, Validators.minLength(3)]), password:new FormControl('',Validators.required) )

How to Implement Custom Validation in ReactiveForms Angular?

ValidatorFn

interface ValidatorFn null

Any validator function which matches signature of above interface is considered as validator function.

Then write below code in validator files.

import AbstractControl, ValidationErrors from '@angular/forms'; export class UsernameValidators null if((control.value as string).indexOf(' ')>=0) return cannotcontainwhitespcae:true; return null;

This code checks if any white space contains in user name or not. After this you need to add this validator in our validator group.

form=new FormGroup( username:new FormControl('',[Validators.required, Validators.minLength(3), UsernameValidators.checkWhiteSpace ]), password:new FormControl('',Validators.required) )

Actually we are creating static method so we can directly call this method using class name.

How to set form level errors in reactive form angular?

To check validation on button click in reactive forms we have ngSubmit event and on that event we call login method.

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

Now in login method we check the validation and as per response we set the errors or not set the errors. To set the form level errors we use setErrors method of form object.

this.form.setErrors( invalidLogin:true ); }

Now to check the errors on UI side we need to add div which error for that we add div and in that we check errors are present or not. And on that basis we show the errors.

<div *ngIf="form.errors" class="alert alert-danger">

How To Listen Changes In Reactive Form Controls Using valueChanges In Angular

In this blog, we are going to learn how to listen to changes in reactive form controls. Most of the time, there are some changes in our form controls, which are created using either FormGroup or FormControl. These reactive form instances like FormGroup and FormControl have a `valueChanges` method that returns an observable that emits the latest values.

You can subscribe to valueChangesand…

Angular Reactive Forms – Building Custom Validators

Angular has built-in input validators for common input validation such as checking min and max length, email etc.  These built-in validators can only take you so far, at some point you might need to build a custom validator.

In this post, I will show you how to build your own custom validators for input and a validator to check whether password and confirm password match before submitting. This…