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          lt form  formRef  quot ngForm quot  gt       lt input type  quot number quot    ngModel    quot firstValue quot  name  quot firstValue quot  min  quot 0 quot  required  gt       lt input type  quot text quot    ngModel    quot secondValue quot  maxlength  quot 5 quot  name  quot secondValue quot  required  gt       lt button type  quot submit quot  gt  Submit  lt  button gt      lt  form gt       FORM    formRef form   json         export class AppComponent      firstValue   -22    secondValue    quot eyy macarena  quot       While minlength is supported  min  quot 0 quot  is ignored by angular validation    So  to make the form result in an error when firstValue ngModel  lt  0  do I need to build a custom validator

User · Answer

Angular 6 supports min  amp  max validators  https   angular io api forms Validators  You can use those for static  amp  dynamic values   Static    lt input min  0  max  5  gt    Dynamic    lt input  min   someMinValue   max   someMaxValue  gt

User · Answer

This question has already been answered  I d like to extend the answer from  amd  Sometimes you might need a default value  For example  to validate against a specific value  I d like to provide it as follows-  lt input integerMinValue  quot 20 quot   gt   But the minimum value of a 32 bit signed integer is -2147483648  To validate against this value  I don t like to provide it  I d like to write as follows-  lt input integerMinValue  gt   To achieve this you can write your directive as follows import  Directive  Input  from   angular core   import  AbstractControl  NG VALIDATORS  ValidationErrors  Validator  Validators  from   angular forms     Directive       selector    integerMinValue        providers    provide  NG VALIDATORS  useExisting  IntegerMinValidatorDirective  multi  true      export class IntegerMinValidatorDirective implements Validator        private minValue   -2147483648        Input  integerMinValue   set min value  number            if  value                this minValue    value                       validate control  AbstractControl   ValidationErrors   null           return Validators min this minValue  control

User · Answer

I ve found this as a solution  Create a custom validator as follow  minMax control  FormControl          return parseInt control value   gt  0  amp  amp  parseInt control value   lt  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

User · Answer

USE   Validators min 5    It can be used while creating a formGroup variable along with other validators  as in  dueAmount        Validators required  Validators pattern         0-9          0-9        0-9        Validators min 5     Not sure if it is in Angular 2  but is available in Angular 5

User · Answer

Angular now supports min max validators by default    Angular provides the following validators by default  Adding the list here so that new comers can easily get to know what are the current supported default validators and google it further as per their interest    min max required requiredTrue email minLength maxLength pattern nullValidator compose composeAsync   you will get the complete list Angular validators  How to use min max validator  From the documentation of Angular -  static min min  number   ValidatorFn  static max max  number   ValidatorFn       min   max   is a static function that accepts a number parameter and returns   A validator function that returns an error map with the min max property   if the validation check fails  otherwise null    use min validator in formControl   for further info  click here   const control   new FormControl 9  Validators min 10      use max validator in formControl   for further info  click here   const control   new FormControl 11  Validators max 10      sometimes we need to add validator dynamically  setValidators   is the saviour  you can use it like the following -  const control   new FormControl 10   control setValidators  Validators min 9   Validators max 11

User · Answer

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

User · Answer

Angular has min and max validators but only for Reactive Forms  As it says in the docs   The validator exists only as a function and not as a directive    To be able to use these validators in template-driven forms you need to create custom directives  In my implementation i use  HostBinding to also apply the HTML min max-attributes  My selectors are also quite specific to prevent validation running on custom form controls that implements ControlValueAccessor with a min or max input  e g  MatDatePickerInput   min-validator   import   Directive  HostBinding  Input   from   angular core   import   AbstractControl  NG VALIDATORS  ValidationErrors  Validator  Validators   from   angular forms     Directive     selector   input type number  min  formControlName  input type number  min  formControl  input type number  min  ngModel      providers     provide  NG VALIDATORS  useExisting  MinValidatorDirective  multi  true       export class MinValidatorDirective implements Validator      HostBinding  attr min    Input   min  number     constructor          validate control  AbstractControl   ValidationErrors   null       const validator   Validators min this min       return validator control           max-validator   import   Directive  HostBinding  Input   from   angular core   import   AbstractControl  NG VALIDATORS  ValidationErrors  Validator  Validators   from   angular forms     Directive     selector   input type number  max  formControlName  input type number  max  formControl  input type number  max  ngModel      providers     provide  NG VALIDATORS  useExisting  MaxValidatorDirective  multi  true       export class MaxValidatorDirective implements Validator      HostBinding  attr max    Input   max  number     constructor          validate control  AbstractControl   ValidationErrors   null       const validator   Validators max this max       return validator control

User · Answer

Find the custom validator for min number validation  The selector name of our directive is customMin   custom-min-validator directive ts  import   Directive  Input   from   angular core   import   NG VALIDATORS  Validator  FormControl   from   angular forms     Directive     selector    customMin  formControlName   customMin  formControl   customMin  ngModel      providers    provide  NG VALIDATORS  useExisting  CustomMinDirective  multi  true      export class CustomMinDirective implements Validator      Input     customMin  number     validate c  FormControl     key  string   any          let v   c value        return   v  lt  this customMin     customMin   true    null           Find the custom validator for max number validation  The selector name of our directive is customMax   custom-max-validator directive ts  import   Directive  Input   from   angular core   import   NG VALIDATORS  Validator  FormControl   from   angular forms     Directive     selector    customMax  formControlName   customMax  formControl   customMax  ngModel      providers    provide  NG VALIDATORS  useExisting  CustomMaxDirective  multi  true      export class CustomMaxDirective implements Validator      Input     customMax  number     validate c  FormControl     key  string   any          let v   c value        return   v  gt  this customMax     customMax   true    null           We can use customMax with formControlName  formControl and ngModel attributes   Using Custom Min and Max Validator in Template-driven Form  We will use our custom min and max validator in template-driven form  For min number validation we have customMin attribute and for max number validation we have customMax attribute  Now find the code snippet for validation    lt input name  num1   ngModel   user num1  customMin  15   numberOne  ngModel  gt   lt input name  num2   ngModel   user num2  customMax  50    numberTwo  ngModel  gt     We can show validation error messages as following    lt div  ngIf  numberOne errors  customMin  gt        Minimum required number is 15   lt  div gt      lt div  ngIf  numberTwo errors  customMax  gt        Maximum number can be 50   lt  div gt     To assign min and max number we can also use property biding  Suppose we have following component properties   minNum   15  maxNum   50     Now use property binding for customMin and customMax as following    lt input name  num1   ngModel   user num1   customMin   minNum   numberOne  ngModel  gt   lt input name  num2   ngModel   user num2   customMax   maxNum    numberTwo  ngModel  gt

User · Answer

I found a library implementing a lot of custom validators - ng2-validation - that can be used with template-driven forms  attribute directives   Example    lt input type  number    ngModel    someNumber  name  someNumber   field  ngModel   range    10  20    gt   lt p  ngIf  someNumber errors  range  gt Must be in range lt  p gt

User · Answer

I ve added a max validation to amd s great answer   import   Directive  Input  forwardRef   from   angular core  import   NG VALIDATORS  Validator  AbstractControl  Validators   from   angular forms         This is a wrapper for  min  and  max   used to work with template driven forms       Directive     selector    min      providers     provide  NG VALIDATORS  useExisting  MinNumberValidator  multi  true       export class MinNumberValidator implements Validator       Input   min  number     validate control  AbstractControl      key  string   any         return Validators min this min  control          Directive     selector    max      providers     provide  NG VALIDATORS  useExisting  MaxNumberValidator  multi  true       export class MaxNumberValidator implements Validator       Input   max  number     validate control  AbstractControl      key  string   any         return Validators max this max  control

User · Answer

Angualr itself provide a min and max number validation functionality   Example - we have a field like age range then see the use of validation       age range         Validators min 1   Validators max 18      the age always be between  1 to 18

User · Answer

You can implement your own validation  template driven  easily  by creating a directive that implements the Validator interface   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 e g         return control value  lt  this min     min   invalid  true  actual  control value      null

User · Answer

Switch to use reactive forms instead of template forms  they are just better   otherwise step 5 will be slightly different   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   gt       let val  number   control value     if  control pristine    control pristine        return null        if  val  lt   max        return null        return    max   true            static min min  number   ValidatorFn   return  control  FormControl      key  string   boolean     null   gt       let val  number   control value     if  control pristine    control pristine        return null        if  val  gt   min        return null        return    min   true              Import service into module  Add includes statement in component where it is to be used        import   NumberValidatorsService   from  app common number-validators service    Add validators to form builder        this myForm   this fb group         numberInputName   0   Validators required  NumberValidatorsService max 100   NumberValidatorsService min 0              In the template  you can display the errors as follows      lt span  ngIf  myForm get  numberInputName   errors max  gt           numberInputName cannot be more than 100      lt  span gt

User · Answer

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   gt          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   amp  amp  value  lt  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   gt          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   amp  amp  value  gt  max     max     max   max   actual   control value     null

User · Answer

In my template driven form  Angular 6  I have the following workaround      lt div class  col-sm-2 form-group  gt               lt label for  amount  gt Amount lt  label gt               lt input type  number                      id  amount                      name  amount                      required                      ngModel    1                     pattern        1-9  0-9                         class  form-control                       amountInput  ngModel   gt               lt span class  text-danger   ngIf  amountInput touched  amp  amp  amountInput invalid  gt                 lt p  ngIf  amountInput errors  required  gt This field is  lt b gt required lt  b gt   lt  p gt                 lt p  ngIf  amountInput errors  pattern  gt This minimum amount is  lt b gt 1 lt  b gt   lt  p gt               lt  span gt           lt  div gt    Alot of the above examples make use of directives and custom classes which do scale better in more complex forms  but if your looking for a simple numeric min  utilize pattern as a directive and impose a regex restriction on positive numbers only

User · Answer

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    lt input type  number   min   minAge   age  ngModel    ngModel    person age  class  form-control   ngClass     is-invalid  age invalid   gt   lt div  ngIf  age invalid  amp  amp   age dirty    age touched   class  invalid-feedback  gt You need to be older than   minAge   to participate lt  div gt    Hope this helps

User · Answer

I was looking for the same thing now  used this to solve it   My code   this formBuilder group      feild    value    Validators required  Validators min 1

User · Answer

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    gt          if isPresent Validators required control              return null                       let val  number   control value         if isNaN val       D  test val toString                        return   quot number quot   true           else if  isNaN prms min   amp  amp   isNaN prms max                      return val  lt  prms min    val  gt  prms max     quot number quot   true    null          else if  isNaN prms min                      return val  lt  prms min     quot number quot   true    null          else if  isNaN prms max                      return val  gt  prms max     quot number quot   true    null          else                    return null                      Usage     check for valid number var numberControl   new FormControl  quot  quot    Validators required  CustomValidators number         check for valid number and min value   var numberControl   new FormControl  quot  quot   CustomValidators number  min  0        check for valid number and max value var numberControl   new FormControl  quot  quot   CustomValidators number  max  20        check for valid number and value range ie   0-20  var numberControl   new FormControl  quot  quot   CustomValidators number  min  0  max  20

User · Answer

In latest Angular versions  min and max are already added  Here is the link  https   angular io api forms Validators max  This is how I used Max validator in my project    lt mat-form-field class  globalInput  gt             lt input  change   CalculateAmount    matInput placeholder  Quantity  name  productQuantity  type  number   formControl   quantityFormControl  gt           lt  mat-form-field gt           lt mat-error  ngIf  quantityFormControl hasError  max    gt            Only  lt strong gt   productQuantity   lt  strong gt  available           lt  mat-error gt    Initialize the form control and add the validator in the component     quantityFormControl   new FormControl     Validators max 15      You can also set  validator dynamically on an event like this     quantityFormControl   new FormControl     OnProductSelected        this quantityFormControl setValidators Validators max this someVariable          Hope it helps

[validation] Min / Max Validator in Angular 2 Final

Examples related to validation

Examples related to angular

Examples related to typescript

Examples related to angular2-forms