Angular 4 Form Validators - minLength & maxLength does not work on field type number
Solution 1
Used it like following and worked perfectly :
phone: ['', [Validators.required, Validators.min(10000000000), Validators.max(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;
};
}
}
Solution 2
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)])]
});
}
}
Solution 3
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>
Solution 4
You should not use length here, for min and max use custom validator like this,
var numberControl = new FormControl("", CustomValidators.number({min: 10000000000, max: 999999999999 }))
Solution 5
This trick will be helpful
In .html file
<input type="text" (keyup)="onKeyUp($event)" formControlName="phone" placeholder="Phone Number">
In .ts file
The below code restrict string characters
public onKeyUp(event: any) {
const NUMBER_REGEXP = /^\s*(\-|\+)?(\d+|(\d*(\.\d*)))([eE][+-]?\d+)?\s*$/;
let newValue = event.target.value;
let regExp = new RegExp(NUMBER_REGEXP);
if (!regExp.test(newValue)) {
event.target.value = newValue.slice(0, -1);
}
}
and other validation
phone: ['', Validators.compose([
Validators.required,
Validators.pattern('^[0-9]{0,30}$')])
])],
The above pattern code allow number upto 30 digits. If you want minimum two digits, you can do like this
Validators.pattern('^[0-9]{2,30}$')
Related videos on Youtube
Sangwin Gawande
CONTACT ME : SANGW.IN | MyCV | [email protected] | LinkedIn | StackOverflow | GitHub Web Development : AngularJS, Angular, Bootstrap, PHP, JavaScript, jQuery, HTML5, razor, CSS3 Mobile Development : IONIC, Cordova Server/API Development : NodeJS, php, Laravel, CakePHP, firebase UI Component Libraries : PrimeNG, Kendo-UI, Ngx-bootstrap, Angular-Material, angular-material2 Databases : MongoDB, MySQL CMS : WordPress, Magento, Joomla, CRM I have a belief that theory teaches us nothing, its actual implementation does. I am set out on a journey of implementing hard earned IT skills to write amazing lines of code. Loving every bit of my work, I am also a music freak & an ardent traveler. I am a Creative Mobile & Web Full Stack Developer at 7+ years of experience. Developer who knows the value of time, very hard working and always delivers the work on time. I am definitely trying to earn a good living through my good developer skills. Along with this I have been using front end frameworks like Angular and React for web development. I have worked with various UI frameworks like Bootstrap, Material Design, Foundation and W3CSS. I have also worked with UI Component Libraries such as PrimeNG, Kendo UI, Ngx-bootstrap, Angular-Material 2. I also contribute on Open sources portals for improving code quality, features and debugging problems other developers have. QUOTES : I have a belief that theory teaches us nothing, its actual implementation does. :) Keep silence and let the Keyboard make all the Noise..!! :)
Updated on November 25, 2021Comments
-
Sangwin Gawande over 2 years
I am trying to develop a contact form, I want user to enter phone number values between length 10-12.
Notably same validation is working on Message field, Its only number field which is giving me trouble.
I found this answer but it is of no use for me.
I have code like following :
HTML :
<form [formGroup]="myForm" (ngSubmit)="myFormSubmit()"> <input type="number" formControlName="phone" placeholder="Phone Number"> <input type="text" formControlName="message" placeholder="Message"> <button class="button" type="submit" [disabled]="!myForm.valid">Submit</button> </form>
TS :
this.myForm = this.formBuilder.group({ phone: ['', [Validators.required, Validators.minLength(10), Validators.maxLength(12)]], message: ['', [Validators.required, Validators.minLength(10), Validators.maxLength(100)]] });`
-
jonrsharpe over 6 yearsNumbers don't have length as far as form validation is concerned. If you want 10-12 digits, what you really want is numbers between 1,000,000,000 and 1,000,000,000,000, surely?
-
Sangwin Gawande over 6 yearsYes, I need numbers between 10000000000 to 999999999999
-
jonrsharpe over 6 yearsThen use that, rather than trying to check the length.
-
Sangwin Gawande over 6 yearsSo there is no default method for that? we'll have to create one to limit those?
-
jonrsharpe over 6 years
-
Sangwin Gawande over 6 yearsThanks, My mistake, Just saw it, wrote it, and it worked. :)
-
-
Tabish Zaman about 6 yearsTs File import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'; @Component({ selector: 'ftl-signup', templateUrl: './signup.component.html', styleUrls: ['./signup.component.scss'] }) export class PasswordChecker implements OnInit { validateForm: FormGroup; constructor(private fb: FormBuilder) { password: ['', [Validators.required, Validators.minLength(5), Validators.maxLength(15)]], }); }
-
kara about 6 yearsYou should edit your answer instead of adding comments to your own answer.
-
Coderer over 5 yearsI know I'm a year late here, and it's not exactly what was asked in the OP, but nobody will want to enter a phone number as
<input type='number'>
. The answer under "Update 1" is correct for integers, but a phone number is not an integer. This isn't even the "falsehoods about phone numbers" piece I was looking for, but it has a lot of good points. -
Paco Zevallos almost 5 yearsExcellent worked perfect for me. A small detail is that when we declare
minlength
in themat-error
note that it is lowercase, while in the validator it isminLength
with uppercase. -
Sangwin Gawande about 4 yearsWhy use extra event
keyup
when Angular can do it without it? -
aman raj about 4 yearsI added
keyup
event to remove special characters or operators while entering otherwise its up to you to addkeyup
event or not -
Sangwin Gawande about 4 yearsUsing
type="number"
removes special characters, doesn't it? -
aman raj about 4 yearsYes it removes special characters in
type= number
but it will have+
,-
,e
while entering . If you want to restrict these operators while entering usekeyup
event else everything is fine. -
Aymen TAGHLISSIA over 2 yearsBut with this soution you can add zeros on the left withour being controlled , maxlength(10) and max(999999999) are not the same -_-