Min / Max Validator in Angular 2 Final

Question

According to thoughtgram.io, the currently supported validators are:

• required
• minlength
• maxlength
• pattern

So, considering the following code (plunkr here):

@Component({
  selector: 'my-app',
  template: `

  <form #formRef="ngForm">
    <input type="number" [(ngModel)]="firstValue" name="firstValue" min="0" required/>
    <input type="text" [(ngModel)]="secondValue" maxlength="5" name="secondValue" required/>
    <button type="submit"> Submit </button> 
  </form>

  FORM: {{formRef.form | json }}
`
})
export class AppComponent { 
  firstValue = -22;
  secondValue = "eyy macarena!"; 
}

While minlength is supported, min="0" is ignored by angular validation:

So, to make the form result in an error when firstValue ngModel < 0, do I need to build a custom validator?

Answer 1

In your code you are using min and not minlength. Please also notice that this will not validate if a number is > 0 but its length.

Answer 2

I found a library implementing a lot of custom validators - ng2-validation - that can be used with template-driven forms (attribute directives). Example:

<input type="number" [(ngModel)]="someNumber" name="someNumber" #field="ngModel" [range]="[10, 20]"/>
<p *ngIf="someNumber.errors?.range">Must be in range</p>

Answer 3

1. Switch to use reactive forms instead of template forms (they are just better), otherwise step 5 will be slightly different.

2. Create a service NumberValidatorsService and add validator functions:

   import { Injectable } from '@angular/core';
   import { FormControl,  ValidatorFn } from '@angular/forms';
   
   @Injectable()
   export class NumberValidatorsService {
   
    constructor() { }
   
     static max(max: number): ValidatorFn {
   return (control: FormControl): { [key: string]: boolean } | null => {
   
     let val: number = control.value;
   
     if (control.pristine || control.pristine) {
       return null;
     }
     if (val <= max) {
       return null;
     }
     return { 'max': true };
     }
   }
   
    static min(min: number): ValidatorFn {
   return (control: FormControl): { [key: string]: boolean } | null => {
   
     let val: number = control.value;
   
     if (control.pristine || control.pristine) {
       return null;
     }
     if (val >= min) {
       return null;
     }
     return { 'min': true };
     }
   }
   
   }
   

3. Import service into module.

4. Add includes statement in component where it is to be used:

       import { NumberValidatorsService } from "app/common/number-validators.service";
   

5. Add validators to form builder:

       this.myForm = this.fb.group({
         numberInputName: [0, [Validators.required, NumberValidatorsService.max(100), NumberValidatorsService.min(0)]],
       });
   

6. In the template, you can display the errors as follows:

    <span *ngIf="myForm.get('numberInputName').errors.max">
            numberInputName cannot be more than 100. 
     </span>
   

Answer 4

As far as I know, is it implemented now, check https://github.com/angular/angular/blob/master/packages/forms/src/validators.ts

This is the part that implements what you are looking for:

 export class Validators {
  /**
   * Validator that requires controls to have a value greater than a number.
   */
  static min(min: number): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
      if (isEmptyInputValue(control.value) || isEmptyInputValue(min)) {
        return null;  // don't validate empty values to allow optional controls
      }
      const value = parseFloat(control.value);
      // Controls with NaN values after parsing should be treated as not having a
      // minimum, per the HTML forms spec: https://www.w3.org/TR/html5/forms.html#attr-input-min
      return !isNaN(value) && value < min ? {'min': {'min': min, 'actual': control.value}} : null;
    };
  }

  /**
   * Validator that requires controls to have a value less than a number.
   */
  static max(max: number): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
      if (isEmptyInputValue(control.value) || isEmptyInputValue(max)) {
        return null;  // don't validate empty values to allow optional controls
      }
      const value = parseFloat(control.value);
      // Controls with NaN values after parsing should be treated as not having a
      // maximum, per the HTML forms spec: https://www.w3.org/TR/html5/forms.html#attr-input-max
      return !isNaN(value) && value > max ? {'max': {'max': max, 'actual': control.value}} : null;
    };
  }

Answer 5

I've found this as a solution. Create a custom validator as follow

minMax(control: FormControl) {
      return parseInt(control.value) > 0 && parseInt(control.value) <=5 ? null : {
        minMax: true
      }
  }

and under constructor include the below code

this.customForm= _builder.group({
                  'number': [null, Validators.compose([Validators.required, this.minMax])],
                });

where customForm is a FormGroup and _builder is a FormBuilder.

Answer 6

Apparently, Angular had the max/min directives for template driven forms at some point but had to remove them in v4.2.0. You can read about the regression that caused the removal here: https://github.com/angular/angular/issues/17491

For now the only working solution that I know of is to use custom directive as @amd suggested. Here's how to use it with Bootstrap 4.

min-validator.directive.ts

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

@Directive({
  selector: '[min]',
  providers: [{ provide: NG_VALIDATORS, useExisting: MinDirective, multi: true }]
})
export class MinDirective implements Validator {

  @Input() min: number;

  validate(control: AbstractControl): { [key: string]: any } {    
    return Validators.min(this.min)(control)    
  }
}

And in your template:

<input type="number" [min]="minAge" #age="ngModel" [(ngModel)]="person.age" class="form-control" [ngClass]="{'is-invalid':age.invalid}">
<div *ngIf="age.invalid && (age.dirty || age.touched)" class="invalid-feedback">You need to be older than {{minAge}} to participate</div>

Hope this helps!