Angular 4 Form Validators - MinLength & MaxLength Does Not Work On Field Type Number

Answer :

Update 1 :

phone: ['',  [Validators.required, Validators.min(10000000000), Validators.max(999999999999)]], 

---

Used it like following and worked perfectly :

 phone: ['',  [Validators.required, customValidationService.checkLimit(10000000000,999999999999)]], 

customValidationService :

import { AbstractControl, ValidatorFn } from '@angular/forms';  export class customValidationService {    static checkLimit(min: number, max: number): ValidatorFn {     return (c: AbstractControl): { [key: string]: boolean } | null => {         if (c.value && (isNaN(c.value) || c.value < min || c.value > max)) {             return { 'range': true };         }         return null;     };   } } 

try this working sample code :

component.html

<div class="container">     <form [formGroup]="myForm"      (ngFormSubmit)="registerUser(myForm.value)" novalidate>     <div class="form-group" [ngClass]="{'has-error':!myForm.controls['phone'].valid}">         <label for="phone">Email</label>         <input type="phone" formControlName="phone" placeholder="Enter Phone"          class="form-control">         <p class="alert alert-danger" *ngIf="myForm.controls['phone'].hasError('minlength')">             Your phone must be at least 5 characters long.         </p>         <p class="alert alert-danger" *ngIf="myForm.controls['phone'].hasError('maxlength')">             Your phone cannot exceed 10 characters.         </p>         <p class="alert alert-danger" *ngIf="myForm.controls['phone'].hasError('required') && myForm.controls['phone'].dirty">             phone is required         </p>     </div>     <div class="form-group text-center">         <button type="submit" class="btn btn-primary" [disabled]="!myForm.valid">Submit</button>     </div> </form> </div> 

component.ts

import { FormGroup, FormBuilder, Validators } from '@angular/forms';  export class AppComponent implements OnInit { myForm: any; constructor(         private formBuilder: FormBuilder     ) {}  ngOnInit() {     this.myForm = this.formBuilder.group({             phone: [null, Validators.compose([Validators.required, Validators.minLength(5), Validators.maxLength(10)])]         }); } } 

I have a trick that 100% work.

Define input of type 'text' and not 'number'.

For eg:

<input placeholder="OTP" formControlName="OtpUserInput" type="text">

Then use pattern which is part of Validation.

Like :

this.ValidOtpForm = this.formbuilder.group({              OtpUserInput: new FormControl(               { value:'', disabled: false },           [           Validators.required,           **Validators.minLength(6),           Validators.pattern('[0-9]*')**         ]), }); 

It means we define input type text that is suitable for min length and we also define pattern(validation) for numeric value so that we can achieve both validation.

Remaining code :

<mat-error *ngIf="RegistrationForm.controls['Password'].hasError('minlength')">Use 6 or more characters with a mix of letters</mat-error> <mat-error *ngIf="ValidOtpForm.controls['OtpUserInput'].hasError('pattern')">Please enter numeric value.</mat-error>