Validador mín. / Máx. En angular 2 final

De acuerdo con thoughtgram.io , los validadores soportados actualmente son:

  • necesario
  • longitud mínima
  • longitud máxima
  • patrón

Entonces, teniendo en cuenta el siguiente código ( plunkr aquí ):

@Component({ selector: 'my-app', template: ` 
FORM: {{formRef.form | json }} ` }) export class AppComponent { firstValue = -22; secondValue = "eyy macarena!"; }

Mientras minlength es compatible, min="0" es ignorado por la validación angular:

enter image description here

enter image description here

Entonces, para hacer que el formulario resulte en un error cuando firstValue ngModel <0, ¿necesito construir un validador personalizado?

Para aplicar la min/max validation en un number , deberá crear un Custom Validator

La clase Validadores actualmente solo tiene algunos validadores, a saber

  • necesario
  • requeridoVerdadero
  • longitud mínima
  • longitud máxima
  • patrón
  • nullValidator
  • componer
  • composeAsync

Validador: Aquí está la versión atenuada de mi Validador de números, puedes mejorarla como quieras

 static number(prms = {}): ValidatorFn { return (control: FormControl): {[key: string]: string} => { if(isPresent(Validators.required(control))) { return null; } let val: number = control.value; if(isNaN(val) || /\D/.test(val.toString())) { return {"number": true}; } else if(!isNaN(prms.min) && !isNaN(prms.max)) { return val < prms.min || val > prms.max ? {"number": true} : null; } else if(!isNaN(prms.min)) { return val < prms.min ? {"number": true} : null; } else if(!isNaN(prms.max)) { return val > prms.max ? {"number": true} : null; } else { return null; } }; } 

Uso:

 // check for valid number var numberControl = new FormControl("", [Validators.required, CustomValidators.number()]) // check for valid number and min value var numberControl = new FormControl("", CustomValidators.number({min: 0})) // check for valid number and max value var numberControl = new FormControl("", CustomValidators.number({max: 20})) // check for valid number and value range ie: [0-20] var numberControl = new FormControl("", CustomValidators.number({min: 0, max: 20})) 

Encontré una biblioteca que implementaba una gran cantidad de validadores personalizados, ng2-validation , que se pueden usar con formularios basados ​​en plantillas (directivas de atributos). Ejemplo:

  

Must be in range

Por lo que sé, se implementa ahora, consulte https://github.com/angular/angular/blob/master/packages/forms/src/validators.ts

Esta es la parte que implementa lo que estás buscando:

  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; }; } 
  1. Cambie para usar formularios reactivos en lugar de formularios de plantilla (son simplemente mejores), de lo contrario, el paso 5 será ligeramente diferente.
  2. Cree un servicio NumberValidatorsService y agregue funciones de validador:

     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. Importar servicio en el módulo.

  4. Agregar instrucción de inclusión en el componente donde se usará:

      import { NumberValidatorsService } from "app/common/number-validators.service"; 
  5. Agregar validadores para formar el constructor:

      this.myForm = this.fb.group({ numberInputName: [0, [Validators.required, NumberValidatorsService.max(100), NumberValidatorsService.min(0)]], }); 
  6. En la plantilla, puede visualizar los errores de la siguiente manera:

       numberInputName cannot be more than 100.  

Puede implementar su propia validación (basada en la plantilla) fácilmente, creando una directiva que implemente la interfaz del Validator .

 import { Directive, Input, forwardRef } 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) // or you can write your own validation eg // return control.value < this.min ? { min:{ invalid: true, actual: control.value }} : null } } 

He encontrado esto como una solución. Crea un validador personalizado como sigue

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

y bajo constructor incluyen el siguiente código

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

donde customForm es un FormGroup y _builder es un FormBuilder.

Angular 6 admite validadores mínimos y máximos : https://angular.io/api/forms/ Validators

Puede usarlos para valores estáticos y dynamics.

Estático:

  

Dinámica:

  

En tu código estás usando min y no minlength . Tenga en cuenta también que esto no validará si un número es> 0 pero su longitud.