Angular 7: Formvalidation, Validators.pattern not working

Question

I need a from validation for only matching integers. Therefore I use the patternvalidator with regex (see below). Additionally the field should not be empty, so I added the required validator.

But the pattern error is never triggered. i read the angular docs and had a look to the source code of pattern and it still makes no sense to me. Additionally, I have read nearly every question on stackoverflow related to this topic. But I still can't figure out why the pattern is not working.

Maybe some of you guys might be able help me, thank you!

Here is my code component.ts:

// definition of the formcontrol
hours = new FormControl('', [
  Validators.required,
  Validators.pattern('^[0-9]*$'),
])

// for debugging
log() {
  console.log('required: ', this.hours.hasError('required'));
  console.log('pattern: ', this.hours.hasError('pattern'));
  console.log('Erros: ', this.hours.errors);
}

template:

<mat-form-field>
  <input matInput [formControl]="hours" (input)="log()"
    placeholder="Anzahl der ausbezahlten Überstunden" type="number">
  <mat-error *ngIf="hours.hasError('required') && !hours.hasError('pattern')">
    Anzahl der Überstunden fehlt!
  </mat-error>
  <mat-error *ngIf="!hours.hasError('required') && hours.hasError('pattern')">
    Anzahl muss eine Ganzzahl sein!
  </mat-error>
</mat-form-field>

Examples inputValue="":

required: true
pattern: false
Error: Object { required: true }

inputValue="1":

required:  false
pattern:  false
Error:  null

inputValue="a":

required:  true
pattern:  false
Error: Object { required: true }

^(0|[1-9][0-9]*)$ use this regex in patter will solve your problem — TheParam
– TheParam, Commented Feb 26, 2019 at 9:02
Thanks for the advice, but still the same behaviour.Additionally this don't seams to be a valid pattern, to match my case see here — Max
– Max, Commented Feb 26, 2019 at 9:05

onik · Accepted Answer · 2019-02-26 09:47:56Z

7

it doesn't work with type="number",if you change it to type="text" it will work

answered Feb 26, 2019 at 9:47

onik

1,7411 gold badge13 silver badges22 bronze badges

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

1 Comment

Max Over a year ago

Yup I was just writing the answer.

Muhammed Albarmavi · Accepted Answer · 2019-02-26 09:32:57Z

2

try this way, normaly I use formBuilder here

component

 this.form = fb.group({
    age:[null , [Validators.required , Validators.pattern('[0-9]*')]]
  })

template

<ng-container *ngIf="form.get('age').invalid && (form.get('age').touched || form.get('age').dirty)">
  <div *ngIf="form.get('age').hasError('required')">
    Required...
  </div>
  <div *ngIf="form.get('age').hasError('pattern')">
    Pattern Not valid
  </div>
</ng-container>

stackblitz demo 🚀🚀

edited Feb 26, 2019 at 9:32

answered Feb 26, 2019 at 9:20

Muhammed Albarmavi

24.5k9 gold badges72 silver badges92 bronze badges

Comments

VascoCC · Accepted Answer · 2019-02-26 09:42:01Z

1

From the documentation required() is of type ValidationErrors, and you're trying to create a FormControl using the constructor(any, ValidatorFn[]).

Have you tried using Validators.compose([Validators.pattern('^[0-9]*$'), Validators.required]) ?

Validators.compose() returns a ValidatorFn that you can use to create a FormControl.

You can check this answer for an example and a working example here.

edited Feb 26, 2019 at 9:42

answered Feb 26, 2019 at 9:20

VascoCC

5006 silver badges17 bronze badges

2 Comments

Max Over a year ago

I tried your advice, but no changes, still the same.

VascoCC Over a year ago

@malbarmawi stackblitz is working, if it doesn't work for you maybe a mix of both solutions do.

Collectives™ on Stack Overflow

Angular 7: Formvalidation, Validators.pattern not working

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related