0
377
ViewsAngular Reactive Form Pattern not working
I'm using Reactive Form on Angular to be able to use both numbers and commas. I made the input type text so that dots and commas appear on the keyboard in the mobile view. I want the entered input to accept only numbers, but the pattern I entered did not help. I can still enter characters after doing this, but I don't want that to happen.
textInput: new FormControl('',
[
Validators.required,
Validators.pattern('[0-9]{7}')
]),
<input autoComplete="off" autoCorrect="off"
type="text"
lang="en"
[formControl]="this.config.textInput"
placeholder="0.0"
minLength={1}
maxLength={79}
spellCheck="false"
(ngModelChange)="amountChanged($event)"
enterkeyhint="next"
step="1"
class="w-100"
>
How can I get the type to be text and only accept numbers?
·
Santiago Trujillo
3 answers
Answer question0
You can use input type: number for example :
<input autoComplete="off" autoCorrect="off"
type="number"
lang="en"
[formControl]="this.config.textInput"
placeholder="0.0"
minLength={1}
maxLength={79}
spellCheck="false"
(ngModelChange)="amountChanged($event)"
enterkeyhint="next"
step="1"
class="w-100">
·
Santiago Trujillo
Report
0
You can update the below pattern for validating your input field.
textInput = new FormControl("", [
Validators.required,
Validators.pattern("[0-9]*")
]);
[0-9]* this may work for you.
I have added demo-link and screenshot below of my example:
Please check and share your feedback.
Thanks.
·
Santiago Trujillo
Report
0
You can crate directive for it like
@Directive({
selector: '[only-number]',
})
export class OnlyNumberDirective implements OnInit {
constructor() {}
ngOnInit() {}
@HostListener('input', ['$event'])
inputEvent(event: KeyboardEvent) {
const input = event.target as HTMLInputElement;
input.value = input.value.replace(/[^\d]+/g, '');
}
}
declare in module
declarations: [AppComponent, OnlyNumberDirective],
To use
<input type="text" only-number />
·
Santiago Trujillo
Report
Answer question