Min / Max Validator in Angular 2 Final

by

To apply min/max validation on a number you will need to create a Custom Validator

Validators class currently only have a few validators, namely

  • required
  • requiredTrue
  • minlength
  • maxlength
  • pattern
  • nullValidator
  • compose
  • composeAsync

Validator: Here is toned down version of my number Validator, you can improve it as you like

static number(prms = {}): ValidatorFn {
    return (control: FormControl): {[key: string]: any} => {
      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;
      }
    };
  }

Usage:

// 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}))

More Related Contents:

  1. How can I manually set an Angular form field as invalid?
  2. How to add form validation pattern in Angular 2?
  3. Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’
  4. Angular2 – FormControl Validation on blur
  5. Select based on enum in Angular2
  6. Get all validation errors from Angular 2 FormGroup
  7. Property ‘controls’ does not exist on type ‘AbstractControl’ Angular 4 [duplicate]
  8. Angular 2 Form “Cannot find control with path”
  9. Generic email validator
  10. TypeScript-‘s Angular Framework Error – “There is no directive with exportAs set to ngForm”
  11. How to validate white spaces/empty spaces? [Angular 2]
  12. Angular 2 creating reactive forms with nested components
  13. Angular 2 form validations start date
  14. Angular2 Error: There is no directive with “exportAs” set to “ngForm”
  15. Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’
  16. What is the best Java email address validation method? [closed]
  17. Angular 2: How to detect changes in an array? (@input property)
  18. How to catch exception correctly from http.request()?
  19. When I refresh my website I get a 404. This is with Angular2 and firebase
  20. Call child component method from parent class – Angular
  21. What Firebase rule will prevent duplicates in a collection based on other fields?
  22. How can I listen for keypress event on the whole page?
  23. How to implement SignIn with Google in Angular 2 using Typescript
  24. Angular 2/4 component with dynamic template or templateUrl
  25. Angular 12 source map is missing in browser
  26. Angular 2 Component @Input not working
  27. Converting an image to base64 in angular 2
  28. What is the difference between formControlName and FormControl?
  29. Do I have to unsubscribe from ActivatedRoute (e.g. params) observables?
  30. How to check empty object in angular 2 template using *ngIf

Leave a Comment