Angular Reactive Form Pattern not working

Question

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?

Will this work https://stackblitz.com/edit/angular-ivy-6uoztq?file=src%2Fapp%2Fapp.component.ts — navnath, Oct 04 '21 at 17:15
Validators won't prevent the user from entering invalid value, they will mark the form control as invalid. — mbojko, Oct 04 '21 at 17:16
There's a very long discussion on this topic here: https://stackoverflow.com/questions/41465542/angular2-input-field-to-accept-only-numbers — Meqwz, Oct 04 '21 at 17:19
https://stackoverflow.com/questions/54460923/angular-2-restrict-input-field/54462816#54462816 — Eliseo, Oct 04 '21 at 18:15
Does this answer your question? [Angular2 - Input Field To Accept Only Numbers](https://stackoverflow.com/questions/41465542/angular2-input-field-to-accept-only-numbers) — Yahya Essam, Oct 04 '21 at 19:33

score 0 · Answer 1 · answered Oct 04 '21 at 18:32

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">

Jai Saravanan · Accepted Answer · 2021-10-14T18:09:38.283

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:

Demo Link

Please check and share your feedback.

Thanks.

edited Oct 14 '21 at 18:09

answered Oct 14 '21 at 18:03

Jai Saravanan

413
4
12

Hi Gokalp Sezer, I am glad you found my answer helpful :) If this or any answer has solved your question please consider accepting it by clicking the check-mark or up-voting it (once you have enough reputation to do so). This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself. There is no obligation to do this. Thanks – Jai Saravanan Nov 02 '21 at 12:50

score 0 · Answer 3 · answered Oct 14 '21 at 18:54

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 />

Demo

Angular Reactive Form Pattern not working

3 Answers3