Angular min and max validators for input[type='number']

Question

As I understand it (perhaps not well as I only started looking at this today) there is are validators built in to Angular that will check the max and min value of an <input type='number'>.
I tried to get this working in the app I'm building but it only comes up invalid when the input is completely empty. Other values validate, even numbers outside of my min/max range.

I tried to replicate it in a plunk but here it is just always valid. I'm at the end of a long day - can anyone just explain what I have to do to make the field in my plunk be valid with values of 5-10 and invalid when outside this range, empty or otherwise just...invalid.

You're never using the validators anywhere. They will only be applied by default on template-driven forms in angular 5. — JB Nizet
– JB Nizet, Commented Oct 16, 2017 at 17:08
Looks like the min/max support was removed because adding it was a breaking change. See this: github.com/angular/angular/issues/17491 and this: github.com/angular/angular/issues/18830 — DeborahK
– DeborahK, Commented Oct 16, 2017 at 17:09

PaulCo · Accepted Answer · 2023-01-26 17:08:54Z

6

As the documentation linked in your question states :

max() exists only as a function, not as a directive

That's due to the two issues cited in @DeborahK comments. But still if you really want to use template-driven forms you can put those directives back in place :

import { Directive, Input } from '@angular/core';
import { NG_VALIDATORS, Validator, Validators, AbstractControl } from '@angular/forms';

@Directive({
  selector: 'input[max]',
  providers: [{provide: NG_VALIDATORS, useExisting: MaxValidator, multi: true}]
})
export class MaxValidator implements Validator {
  @Input() max:number;
  validate(control: AbstractControl): {[key: string]: any} {
    if(typeof this.max == 'string') this.max = +this.max;
    return this.max ? Validators.max(this.max)(control) : null;
  }
}

I'll let you refactor it to get the MinValidatorone!

edited Jan 26, 2023 at 17:08

answered Mar 15, 2018 at 16:15

PaulCo

1,5175 gold badges18 silver badges35 bronze badges

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

Comments

Mihailo · Accepted Answer · 2017-10-16 18:30:04Z

3

I strongly recommend you use Reactive Forms instead.
With Reactive Forms your business logic stays in the component.ts code, keeping your templates more clear and easier to reason about.

WorkingExample (based on your original plunk)

Explanation:

component.ts

myForm = new FormGroup({}) // Instantiating our form

constructor(private fb: FormBuilder){ // Injecting the ReactiveForms FormBuilder.
  this.myForm = fb.group({
    // Adding the "myNum" input to our FormGroup along with its min-max Validators.
    'myNum': ['', [Validators.min(5), Validators.max(10)]] 
  })
}

component.html - template

<form [formGroup]="myForm"> <!-- Binding myForm to the form in the template -->

  <label for="myNum">Some Val</label>
  <!-- formControlName binds our myNum field declared in the ts code. -->
  <input type='number' id="myNum" formControlName="myNum">

</form>

answered Oct 16, 2017 at 18:30

Mihailo

4,9974 gold badges24 silver badges31 bronze badges

2 Comments

popClingwrap Over a year ago

I thought it would be overkill to dive into reactive (never looked at them before) for such a small form but actually it is (in my opinion) a lot more intuitive than template based. So cheers for nudging me in the right direction.

Bogdan Onyshenko Over a year ago

And after this it is submiting just normaly. Ignoring the validators.

DeborahK · Accepted Answer · 2017-10-16 17:13:31Z

0

I have a custom number range validator here: https://github.com/DeborahK/MovieHunter/tree/master/src/app/shared

It basically looks like this:

static range(min: number, max: number): ValidatorFn {
    return (c: AbstractControl): { [key: string]: boolean } | null => {
        if (c.value && (isNaN(c.value) || c.value < min || c.value > max)) {
            return { 'range': true };
        }
        return null;
    };
}

answered Oct 16, 2017 at 17:13

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

Comments

Hamza Khanzada · Accepted Answer · 2020-11-06 10:03:33Z

0

As @Mihailo's answer is correct, but in my case I was using

 'myNum': ['', [Validators.minLength(5), Validators.maxLength(10)]]

instead of

 'myNum': ['', [Validators.min(5), Validators.max(10)]]

notice min is different from minLength and max is different from maxLength.

answered Nov 6, 2020 at 10:03

Hamza Khanzada

1,5601 gold badge26 silver badges44 bronze badges

Collectives™ on Stack Overflow

Angular min and max validators for input[type='number']

4 Answers 4

Comments

WorkingExample (based on your original plunk)

Explanation:

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Explanation:

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related