I have an angular4 application with a form. In this one I have an input to enter a percentage. So, I want to block the input with value between 0 and 100.
I tried to add min="0"
and max="100"
but I can yet enter an number higher than 100 or smaller than 0.
template
<md-input-container>
<input type="number"
maxlength="3"
min="0"
max="100"
required
mdInput
placeholder="Charge"
[(ngModel)]="rateInput"
name="rateInput">
<md-error>Required field</md-error>
</md-input-container>
Do you know how I can do this ?
If you are looking to validate length use minLength
and maxLength
instead.
[I assume the reader has basic knowledge of Angular2+ and Forms]
It is easy to show a numerical input and put the limits, but you have to also take care of things may happen out of your predictions.
<input type="number" [min]="0.00" [max]="100.00" [step]="0.01" formControlName="rateFC">
import { FormGroup, FormControl, Validators } from '@angular/forms';
//many other things...
this.myFG = new FormGroup({
//other form controls...,
rateFC : new FormControl(0, [Validators.min(0), Validators.max(100)])
});
.form-control.ng-touched.ng-invalid{
border:2px solid red;
}
<button type="submit" [disabled]="!myFG.valid">Submit</button>
Here is the solution :
This is kind of hack , but it will work
<input type="number"
placeholder="Charge"
[(ngModel)]="rateInput"
name="rateInput"
pattern="^$|^([0-9]|[1-9][0-9]|[1][0][0])?"
required
#rateInput2 = "ngModel">
<div *ngIf="rateInput2.errors && (rateInput2.dirty || rateInput2.touched)"
<div [hidden]="!rateInput2.errors.pattern">
Number should be between 0 and 100
</div>
</div>
Here is the link to the plunker , please have a look.
You can control with a change event if the input is within your range, if it is not in the range you assign 0.
<md-input-container>
<input type="number"
maxlength="3"
min="0"
max="100"
required
mdInput
placeholder="Charge"
[(ngModel)]="rateInput"
(change)= "rateInput < 0 ? rateInput = 0 : rateInput; rateInput > 100 ? rateInput = 0 : rateIntput;"
name="rateInput">
<md-error>Required field</md-error>
</md-input-container>
Most simple approach in Template driven forms for min/max validation with out using reactive forms and building any directive, would be to use pattern attribute of html. This has already been explained and answered here please look https://stackoverflow.com/a/63312336/14069524
Actually when you use type="number" your input control populate with up/down arrow to increment/decrement numeric value, so when you update textbox value with those button it will not pass limit of 100, but when you manually give input like 120/130 and so on, it will not validate for max limit, so you have to validate it by code.
You can disable manual input OR you have to write some code on valueChange/textChange/key* event.
Simply do this in angular2+ by adding (onkeypress)
<input type="number"
maxlength="3"
min="0"
max="100"
required
mdInput
placeholder="Charge"
[(ngModel)]="rateInput"
(onkeypress)="return (event.charCode == 8 || event.charCode == 0) ? null : event.charCode >= 48 && event.charCode <= 57"
name="rateInput">
Tested on Angular 7
You can write a directive to listen the change event on the input and reset the value to the min value if it is too low. StackBlitz
@HostListener('change') onChange() {
const min = +this.elementRef.nativeElement.getAttribute('min');
if (this.valueIsLessThanMin(min, +this.elementRef.nativeElement.value)) {
this.renderer2.setProperty(
this.elementRef.nativeElement,
'value',
min + ''
);
}
}
Also listen for the ngModelChange event to do the same when the form value is set.
@HostListener('ngModelChange', ['$event'])
onModelChange(value: number) {
const min = +this.elementRef.nativeElement.getAttribute('min');
if (this.valueIsLessThanMin(min, value)) {
const formControl = this.formControlName
? this.formControlName.control
: this.formControlDirective.control;
if (formControl) {
if (formControl.updateOn === 'change') {
console.warn(
`minValueDirective: form control ${this.formControlName.name} is set to update on change
this can cause issues with min update values.`
);
}
formControl.reset(min);
}
}
}
Full code:
import {
Directive,
ElementRef,
HostListener,
Optional,
Renderer2,
Self
} from "@angular/core";
import { FormControlDirective, FormControlName } from "@angular/forms";
@Directive({
// tslint:disable-next-line: directive-selector
selector: "input[minValue][min][type=number]"
})
export class MinValueDirective {
@HostListener("change") onChange() {
const min = +this.elementRef.nativeElement.getAttribute("min");
if (this.valueIsLessThanMin(min, +this.elementRef.nativeElement.value)) {
this.renderer2.setProperty(
this.elementRef.nativeElement,
"value",
min + ""
);
}
}
// if input is a form control validate on model change
@HostListener("ngModelChange", ["$event"])
onModelChange(value: number) {
const min = +this.elementRef.nativeElement.getAttribute("min");
if (this.valueIsLessThanMin(min, value)) {
const formControl = this.formControlName
? this.formControlName.control
: this.formControlDirective.control;
if (formControl) {
if (formControl.updateOn === "change") {
console.warn(
`minValueDirective: form control ${
this.formControlName.name
} is set to update on change
this can cause issues with min update values.`
);
}
formControl.reset(min);
}
}
}
constructor(
private elementRef: ElementRef<HTMLInputElement>,
private renderer2: Renderer2,
@Optional() @Self() private formControlName: FormControlName,
@Optional() @Self() private formControlDirective: FormControlDirective
) {}
private valueIsLessThanMin(min: any, value: number): boolean {
return typeof min === "number" && value && value < min;
}
}
Make sure to use this with the form control set to updateOn blur or the user won't be able to enter a +1 digit number if the first digit is below the min value.
this.formGroup = this.formBuilder.group({
test: [
null,
{
updateOn: 'blur',
validators: [Validators.min(5)]
}
]
});
Source: Stackoverflow.com