0

I am working on an Angular 8 application and following reacting forms approach. Facing an issue with numeric text box and copying a sample code below.

Typescript:

this.sampleForm = this.formBuilder.group({
            age: ['', [Validators.required, Validators.pattern('/^-?(0|[1-9]\d*)?$/')]]
        });

HTML:

<div class="form-group">
                        <label>Age</label>
                        <input type="number" formControlName="age" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.age.errors }" />
                        <div *ngIf="submitted && f.age.errors" class="invalid-feedback">
                            <div *ngIf="f.age.errors.required">Age is required</div>
                             <div *ngIf="f.age.errors.pattern">invalid age value</div>
                        </div>
                    </div>

Sample Input value:

'-035040958094385-3443-4355'

Expected Validation error:

'invalid age value'

Actual validation error:

'Age is required'

user3161958
  • 25
  • 2
  • 11
  • be carefull, the control when you defined in .ts is **A**ge and the form in .html **a**ge (Angular is case-sensitive). – Eliseo Nov 03 '19 at 19:32
  • Sure..It's sample code.But the actual issue is numeric textbox not showing pattern matching error. – user3161958 Nov 03 '19 at 19:34
  • I make a stackblitz witth your code, see https://stackblitz.com/edit/angular-zp5uqr?file=src%2Fapp%2Fapp.component.html, check if you get any error in console in your code (take account that if if you put "number" the value is null if you write a string) – Eliseo Nov 03 '19 at 19:38
  • @Eliseo Thanks for the sample code. But it's always throwing invalid error irrespective of Regex. Eg: for the input 100, its showing error – user3161958 Nov 03 '19 at 20:01

3 Answers3

1

you need to put all the Validators in array

Age: ['', [Validators.required, Validators.pattern('/^-?(0|[1-9]\d*)?$/')]]

instead of 

Age: ['', Validators.required, Validators.pattern('/^-?(0|[1-9]\d*)?$/')]
Safwan Mh
  • 66
  • 8
  • Ahh..Sorry that was a typo error. But the issue is still there. – user3161958 Nov 03 '19 at 19:31
  • hmm, is f a getter property ?? if yes give me the code of the property – Safwan Mh Nov 03 '19 at 19:35
  • Am just trying to use a numeric textbox and the problem is, it's not throwing pattern matching error. Is it the default behavior? – user3161958 Nov 03 '19 at 19:38
  • yeah, according to your regex format the value -035040958094385-3443-4355 doesn't match the format, to test your pattern (regex) go to https://regexr.com/ and pass /^-?(0|[1-9]\d*)?$/ in the expression input and test whatever kind of inputs – Safwan Mh Nov 03 '19 at 19:43
  • so your regex format prevents a user from inserting values starting with 0 and at least 2 digits, so if you try to insert '-' you won't get any error – Safwan Mh Nov 03 '19 at 19:49
  • Thanks, But the problem here is, it wont throw any pattern matching error. – user3161958 Nov 03 '19 at 19:54
  • I solved the issue, just remove / from the pattern. for more info check this URL https://stackoverflow.com/questions/42392373/angular-2-validators-pattern-not-working – Safwan Mh Nov 03 '19 at 20:02
  • Great..This was the core issue I believe.Thank you so much:) – user3161958 Nov 03 '19 at 20:20
0

Check this stackblitz.. this way you can solve problem.

https://stackblitz.com/edit/angular-g9j46z?file=src%2Fapp%2Fapp.component.html

Developer
  • 3,309
  • 2
  • 19
  • 23
0

Your regexp should look like this: It will accept age between 1 and 200. Taken from this answer.

age: ["", [Validators.required, Validators.pattern("(0?[1-9]|[1-9][0-9]|[1][1-9][1-9]|200)")]]

Check this working stackblitz.

robert
  • 5,742
  • 7
  • 28
  • 37