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.