2

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.

learning...
  • 3,104
  • 10
  • 58
  • 96

1 Answers1

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

try like this

Raviteja V
  • 454
  • 5
  • 11