angular 8 pattern / regex not working as expected accept only (minus / digit)

Question

Currently working on regex / pattern in angular where i need to restrict the user to input only one minus and digit as per the below example.

-10
-10.00
 10

This is what i have tried so far.

<input style="width: 65px;" ng-pattern="/^-?[0-9]\d*(\.\d+)?$/" class="form-control form-control-sm bg-light" type="number" [(ngModel)]="col.value" required>

I checked this pattern in regex.com this was working here but not in Angular can some one please let me know what I am doing wrong here.

@WiktorStribiżew I am not using reactive template here please don't close — Mr.M, May 10 '20 at 08:43
@WiktorStribiżew I am not using reactive way please don't close the question — Mr.M, May 10 '20 at 08:45
So, what are you using? Show the code. "Regex not working in code and working in regex101" is not clear and allows closing with a generic duplicate. You need to state the exact issue, show the failing code, and provide some test cases with expected output for each. — Wiktor Stribiżew, May 10 '20 at 09:02
@WiktorStribiżew I am using template driven from where i am trying to give in my regex in pattern = ^-?[0-9]\d*(\.\d+)?$ this one i tried in regex101 which is worked there but not in angular — Mr.M, May 10 '20 at 09:31
**Post the failing code.** I believe you just have a typo, not even related to regex. — Wiktor Stribiżew, May 10 '20 at 09:34
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/213540/discussion-between-mahadevan-and-wiktor-stribizew). — Mr.M, May 10 '20 at 09:35
actually i was trying two way 1) is pattern and second way is like this onkeydecimalCheck(e){ var inputValue = /^[-]?[0-9]*[.]?[0-9]+$/g; return e.match(inputValue) ; } calling this method in keypress — Mr.M, May 10 '20 at 09:37
Add the *reproducible* code to the question. Explain what you expect, it is not clear what you mean by "not working". — Wiktor Stribiżew, May 10 '20 at 09:42

Arun Mohan · Answer 1 · 2020-05-10T13:41:59.640

You need to escape for javascript and regex. For me it worked like this.

<input style="width: 65px;"
 pattern="^-?[0-9]\\d*(\\.\\d+)?$"
 class="form-control form-control-sm bg-light" type="number" [(ngModel)]="myProperty" required>

Since in angular html is not actual html but will be transformed to javascript so you need to escape regex special escape sequences again so that JS could understand its part of regex. If you dont escape :

html is as follows and wont work

<input style="width: 65px;" pattern="/^-?[0-9]\d*(\.\d+)?$/" class="form-control form-control-sm bg-light" type="number" [(ngModel)]="col.value" required>

In dom it is as follows

<input class="form-control form-control-sm bg-light" ng-pattern="/^-?[0-9]d*(.d+)?$/" required="" style="width: 65px;" type="number" ng-reflect-required="">

For managing a simple input like in your case you can use template ref to check validity

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  template: 
    `<input style="width: 65px;" #ref (keyup)="trigger(ref)"
     pattern="^-?[0-9]\\d*(\\.\\d+)?$"
     class="form-control form-control-sm bg-light" type="number" [(ngModel)]="myProperty" required>
    <h1>{{ myProperty }}</h1>`,
})
export class AppComponent  {
  myProperty = 222;

   @ViewChild('ref') ref: ElementRef;

  trigger(e) {
    console.log(this.ref.nativeElement.validity.valid);
  }
}

Simple version without template ref

myProperty = 22;
showError = false;


onkeydecimalCheck(e){
const value = e.target.value;
console.log(value);
var regex = new RegExp(/^-?[0-9]+(\.\d+)?$/);
const flag = regex.test(value) ;

if (!flag) {
this.showError = true;
} else {
this.showError = false;
}
}


<input style="width: 65px;" type="number" (keyup)="onkeydecimalCheck($event)"
[value]="myProperty" required>

<span *ngIf="showError">Invalid data</span>

We can display some error. The issue with number field is that if you type + at the start eventhough it displays + if you check event.target.value will be empty

still this is allowing plus symbol and i need only one minus in the front I was trying almost more than a day — Mr.M, May 10 '20 at 06:07
actually the same regexp was perfectly working in regex this not accepting plus symbol there and only one minus also — Mr.M, May 10 '20 at 06:09
Are you using ng-pattern if so change it to pattern. Also it wont block the keys but trigger a flag as invalid input. — Arun Mohan, May 10 '20 at 06:29
Dont try like the dom scenario. Try the code with template check. It will work. I just showed you how dom will look like if you dont multi escape. — Arun Mohan, May 10 '20 at 07:23
As I said pattern wont block your input like you can press ++ or --+++ whatever you want. But only the flag will be set internally as invalid. You can use that flag to display error or other logic. Else you have to manually block all invaid keys using keycodes — Arun Mohan, May 10 '20 at 07:29
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/213533/discussion-between-mahadevan-and-arun-mohan). — Mr.M, May 10 '20 at 08:05

score 0 · Answer 2 · answered May 10 '20 at 06:17

0

It seems that ng-patter works with angularjs and not angular so you should try angular patternValidator directive instead angular docs

answered May 10 '20 at 06:17

Anupam Minz

58
1
4

angular 8 pattern / regex not working as expected accept only (minus / digit)

2 Answers2