applying pattern validator to input type number Angular 6

Question

I have reactive form and one of the fields user can only enter positive non decimal number.

this.projectForm = new FormGroup({
      'id': new FormControl(null, [Validators.required]),
      'name': new FormControl(null, [Validators.required]),
      'seqNo': new FormControl(null, [Validators.required, Validators.pattern(/^[1-9]+[0-9]*$/)]) 
    });

When i keep it as input type text then both the validations fire without any issue. I can't input other than positive int number.

        <input type="text" id="seqNo" class="form-control" placeholder="Seq No" formControlName="seqNo" min="1" step="1">
        <span class="mwk-validation-error form-text" *ngIf="!projectForm.get('seqNo').valid && projectForm.get('seqNo').errors?.required">Seq no is required!</span>
        <span class="mwk-validation-error form-text" *ngIf="!projectForm.get('seqNo').valid && !projectForm.get('seqNo').errors?.required">Seq no must be positive number</span>

I want to use input type = number here. The issue is

on alphabets, it treats as nothing entered so required msg displays.
and it lets me enter a decimal value, pattern validation doesn't fire for me

How to fix this? I don't want to write a custom validation since for alphabets it won't fire any ways.

score 0 · Answer 1 · answered Feb 15 '19 at 12:34

0

 <span *ngIf="projectForm.hasError('required', 'seqNo')">
                        Name is required.
                    </span>

try like this

answered Feb 15 '19 at 12:34

Raviteja V

454
5
11

applying pattern validator to input type number Angular 6

1 Answers1