Angular Reactive Form Validation: Do not allow a number less than existing number

Question

I have a numeric input field in Angular reactive form.

 <input id="referenceNumber" type="number" formControlName="referenceNumber" />
 <div *ngIf="form.referenceNumber.invalid && (form.referenceNumber.dirty || form.referenceNumber.touched)">
    <span *ngIf="form.referenceNumber.errors?.required">
       Please Enter a number.
    </span>
 </div>

I want to show an error message on entering a value less than initial value. Do I need to create a custom validator or is there an easier way to do the same.

When you create the form, you add this initial value? – Tzimpo Mar 08 '20 at 09:57 — Tzimpo, Mar 08 '20 at 09:57

Tzimpo · Accepted Answer · 2020-03-08T10:35:20.787

4

You set initial value on your input and you are use the built in Validators.min validator. You set as min number your initial value.

var initialValue: number;

this.form = this.fb.group({
    referenceNumber: [initialValue. 
    Validators.min(initialValue),
    Validators.pattern(/^[1-9]\d*$/) ])
});

html

<span *ngIf="myForm.get('referenceNumber').errors.min">
     numberInputName cannot be more than {{ initialValue }}. 
</span>

<span *ngIf="myForm.get('referenceNumber').errors?.pattern">
 numberInputName must be greater than zero
</span>

edited Mar 08 '20 at 10:35

answered Mar 08 '20 at 10:02

Tzimpo

964
1
9
24

How can I show two separate error messages a) one for less than zero b) one for between zero and given range – Madhur Maurya Mar 08 '20 at 10:16
1

If the number is less than zero you want a seperate error message? – Tzimpo Mar 08 '20 at 10:25
@MadhurMaurya i update my answer with a second pattern validator which allow numbers greater than zero. – Tzimpo Mar 08 '20 at 10:36
Thanks @Tzimpo I was trying the same. Won't it display both error messages when input it some negative number say (-1). I handled it by applying double checks in *ngIf such that only only validation passes through. – Madhur Maurya Mar 08 '20 at 11:00
@MadhurMaurya Great! – Tzimpo Mar 08 '20 at 11:03

Angular Reactive Form Validation: Do not allow a number less than existing number

1 Answers1