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'

Improve this question
4
  • be carefull, the control when you defined in .ts is Age and the form in .html age (Angular is case-sensitive). Commented Nov 3, 2019 at 19:32
  • Sure..It's sample code.But the actual issue is numeric textbox not showing pattern matching error. Commented Nov 3, 2019 at 19:34
  • I make a stackblitz witth your code, see stackblitz.com/edit/…, 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) Commented Nov 3, 2019 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 Commented Nov 3, 2019 at 20:01

3 Answers 3

Reset to default
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*)?$/')]
Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

Ahh..Sorry that was a typo error. But the issue is still there.
hmm, is f a getter property ?? if yes give me the code of the property
Am just trying to use a numeric textbox and the problem is, it's not throwing pattern matching error. Is it the default behavior?
yeah, according to your regex format the value -035040958094385-3443-4355 doesn't match the format, to test your pattern (regex) go to regexr.com and pass /^-?(0|[1-9]\d*)?$/ in the expression input and test whatever kind of inputs
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
|
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.

Improve this answer

Comments

0

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

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

Improve this answer

1 Comment

Thanks..Could you please give me a sample which is showing pattern matching error using html numeric input?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.