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
– Tzimpo

2020-03-08 09:57:44 +00:00
Commented Mar 8, 2020 at 9:57 — Tzimpo
– Tzimpo, Commented Mar 8, 2020 at 9:57

Tzimpo · Accepted Answer · 2020-03-08 10:35:20Z

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 8, 2020 at 10:35

answered Mar 8, 2020 at 10:02

Tzimpo

1,0072 gold badges11 silver badges28 bronze badges

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

5 Comments

Madhur Maurya Over a year ago

How can I show two separate error messages a) one for less than zero b) one for between zero and given range

Tzimpo Over a year ago

If the number is less than zero you want a seperate error message?

Tzimpo Over a year ago

@MadhurMaurya i update my answer with a second pattern validator which allow numbers greater than zero.

Madhur Maurya Over a year ago

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.

Tzimpo Over a year ago

@MadhurMaurya Great!

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related