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?

Validators won't prevent the user from entering invalid value, they will mark the form control as invalid. — mbojko
– mbojko, Commented Oct 4, 2021 at 17:16
There's a very long discussion on this topic here: stackoverflow.com/questions/41465542/… — Meqwz
– Meqwz, Commented Oct 4, 2021 at 17:19

Jai Saravanan · Accepted Answer · 2021-10-14 18:09:38Z

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, 2021 at 18:09

answered Oct 14, 2021 at 18:03

Jai Saravanan

4434 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jai Saravanan Over a year ago

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

Yahya Essam · Accepted Answer · 2021-10-04 18:32:51Z

0

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

answered Oct 4, 2021 at 18:32

Yahya Essam

1,9122 gold badges26 silver badges44 bronze badges

Comments

navnath · Accepted Answer · 2021-10-14 18:54:51Z

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

Demo

answered Oct 14, 2021 at 18:54

navnath

3,7241 gold badge13 silver badges20 bronze badges

Collectives™ on Stack Overflow

Angular Reactive Form Pattern not working

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related