Search results

Angular Reactive Form Validator

Syncfusion Angular UI Component provides custom built in reactive form validators. These validators will help you to validate your input component at client side before submitting.

Here the list of validators available.

  • Min
  • Max
  • CreditCard
  • Date
  • DateIso
  • digits
  • Email
  • MaxLength
  • MinLength
  • Number
  • Required
  • Tel
  • Url
  • Range
  • Rangelength
Validator Description Code Snippet
min This validator check whether the form control value is less than min value and it makes the form validation failed if it not satisfied. Syntax: FormValidators.min (18) this.reactForm = new FormGroup({age: new FormControl(”, [FormValidators.min(8)]) });
max This validator check whether the form control value is not greater than max value and it makes the form validation failed if it not satisfied. Syntax: FormValidators.max(18) this.reactForm = new FormGroup({age: new FormControl(”, [FormValidators.max(8)])});
date The date validator is validate the given control value is date format string. Syntax:FormValidators.date this.reactForm = new FormGroup({ dob: new FormControl(”, [FormValidators.date]) });
dateISO The dateIso validator is validate the given input is ISO standard format. Example : 2008-09-15T15:53:00 Syntax : FormValidator.dateISO this.reactForm = new FormGroup({ dob: new FormControl(”, [FormValidators.dateISO]) });
digits The digit validator validates the given input is numeric that allows dot digits. Syntax : FormValidator.digits this.reactForm = new FormGroup({ currency: new FormControl(”, [FormValidators.digits]) });
email The email validator validates the given input is email format string. Syntax : FormValidator.email this.reactForm = new FormGroup({ email: new FormControl(”, [FormValidators.email]) });
maxLength This validator check whether the form control value length is not greater than max value and it makes the form validation failed if it not satisfied. Syntax: FormValidators.maxLength(150) this.reactForm = new FormGroup({ comments: new FormControl(”, [FormValidators. maxLength(150)]) });
minLength This validator check whether the form control value length is not less than min value and it makes the form validation failed if it not satisfied. Syntax: FormValidators.minLength(100) this.reactForm = new FormGroup({ comments: new FormControl(”, [FormValidators. minLength(100)])});
number This validator validate the form control value is a number type or not. Syntax: FormValidator.number this.reactForm = new FormGroup({ age: new FormControl(”, [FormValidators. number])});
required This validator validates the form controls value is should not be empty or null or undefined. Syntax: FormValidator.required this.reactForm = new FormGroup({ name: new FormControl(”, [FormValidators. number])});
tel This validator validates the form controls value is should be telephone number. Syntax: FormValidator.tel this.reactForm = new FormGroup({ Phone: new FormControl(”, [FormValidators. tel])});
range This validator validates the form controls value is should be within the specific range value. Syntax: FormValidator.range(18,50) this.reactForm = new FormGroup({ age: new FormControl(”, [FormValidators. range(18,50)]) });
rangeLength This validator validates the form controls value is should be within the specific range length. Syntax: FormValidator.rangeLength(100,150) this.reactForm = new FormGroup({age: new FormControl(”, [FormValidators. rangeLength(100,150)]) });

Creating Angular Reactive Form with Syncfusion Angular UI Validator

Step 1: To getting start with an angular reactive form by using the following link Angular Reactive form.

Step 2: To add Syncfusion Angular UI Validation, Need to import the below validator class from @syncfusion\ej2-angular-inputs.

import { FormValidators } from '@syncfusion/ej2-angular-inputs';

Step 3: Add the Required validator in your form group component.

this.reactForm = new FormGroup({
      'check': new FormControl('', [FormValidators.required]),
      'email_check': new FormControl('', [FormValidators.email]),
      'date_check': new FormControl('', [FormValidators.date]),
      'city': new FormControl('', [FormValidators.required]),
      'state': new FormControl('', [FormValidators.required]),
    });

Simple Sample with Syncfusion Angular UI Validation. create this as Documentation Sample