Range directive validator using Validators.min and Validators.max

<input type="number" matInput name="mes" appRange min="1" max="12">

 

import { Directive, Input } from '@angular/core';

import { AbstractControl, NG_VALIDATORS, ValidationErrors, Validator, Validators } from '@angular/forms';

@Directive({

selector: '[appRange][min][max]',

providers: [

{ provide: NG_VALIDATORS, useExisting: RangeDirective, multi: true }

]

})

export class RangeDirective implements Validator {

@Input() min: number;

@Input() max: number;

validate(control: AbstractControl): ValidationErrors | null {

return {...Validators.min(this.min)(control), ...Validators.max(this.max)(control)};

}

}