Angular 2 Form Validation For Numbers minimum and maximum

Question

I have a form with input boxes. The input boxes are in both type text and numbers. And I have to validate them and I followed this tutorial and tried to validate them.

According to that if I have to validate a string then I can use the control group as follows.

constructor(fb: FormBuilder){
    this.complexForm = fb.group({
      'firstName' : [null, Validators.required],
      'lastName': [null, Validators.compose([Validators.required, Validators.minLength(5), Validators.maxLength(10)])]
})

And the HTML code for this as follows...

<form [formGroup]="complexForm" (ngSubmit)="submitForm(complexForm.value)">
      <div class="form-group">
        <label>First Name:</label>
        <input class="form-control" type="text" placeholder="John" [formControl]="complexForm.controls['firstName']">
      </div>
      <div class="form-group">
        <label>Last Name</label>
        <input class="form-control" type="text" placeholder="Doe" [formControl]="complexForm.controls['lastName']">
      </div>
      <div class="form-group">
        <button type="submit" class="btn btn-default">Submit</button>
      </div>
</form>

But I have to validate a number type input box also as the following example.

<form [formGroup]="complexForm" (ngSubmit)="submitForm(complexForm.value)">
          <div class="form-group">
            <label>Age:</label>
            <input class="form-control" type="number"  [formControl]="complexForm.controls['age']">
          </div>
          <div class="form-group">
            <button type="submit" class="btn btn-default">Submit</button>
          </div>
</form>

But Problem is there is no option for Validators to select what is minimum value and maximum value for the input.

are there someone has a solution for this issue?

Thanks.

Here is simlilar question http://stackoverflow.com/questions/39847862/min-max-validator-in-angular-2-final — mehari, Nov 18 '16 at 09:00

score 21 · Answer 1 · answered Aug 06 '17 at 10:18

The current version of angular 4 now has min and max validators

So it is as simple as writing

this.complexForm = fb.group({
   age:[null,[Validators.required, Validators.min(5),Validators.max(90)]],
})

Remember it is on the @angular/forms repo

$: npm uninstall @angular/forms --save
$: npm install @angular/forms --save

score 11 · Accepted Answer · answered Nov 18 '16 at 09:05

11

There's no built-in Validator for min/max currently you can checkout the source for Validator to see whats available.

What you can do is create a custom validator function following the tutorials in the official docs

Example:

export function maxValue(max: Number): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} => {
    const input = control.value,
          isValid = input > max;
    if(isValid) 
        return { 'maxValue': {max} }
    else 
        return null;
  };
}

With this you can update your code to

constructor(fb: FormBuilder){
this.complexForm = fb.group({
  'firstName' : [null, Validators.required],
  'lastName': [null, Validators.compose([Validators.required, Validators.minLength(5), Validators.maxLength(10)])],
  'age': [null, maxValue(60)]
})

answered Nov 18 '16 at 09:05

jkris

5,851
1
22
30

Thank you very much for the answer :) – Dilanka Rathnayake Nov 21 '16 at 06:10
1

@jkris - thx for example... But isn't it isValid = input >= max – JGFMK Aug 11 '17 at 22:19
works great but the const name isValid seems backwards. I changed it from isValid to invalid. returning null means it passed the validation check – sandman0615 Jun 22 '18 at 20:14

score 5 · Answer 3 · answered Nov 18 '16 at 08:39

5

If I get your issue right, try to include your validators' requirements also in HTML so your code will look as follows:

<form [formGroup]="complexForm" (ngSubmit)="submitForm(complexForm.value)">
  <div class="form-group">
    <label>Age:</label>
    <input class="form-control" type="number" required minlength="5" maxlength="10" [formControl]="complexForm.controls['age']">
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-default">Submit</button>
  </div>
</form>

answered Nov 18 '16 at 08:39

Marcin

1,426
16
19

I have to change CSS and give warning boxes if user inputs are invalid. so I have to detect the inputs are invalid or valid. So how can I detect by the .ts file if user inputs are valid or invalid. Also if we declare in HTML code as max = 10 the UI don't allow to type above 10. I don't want like that. it's not user-friendly. I have to detect validation errors and give warning boxes – Dilanka Rathnayake Nov 18 '16 at 09:04

score -1 · Answer 4 · answered May 31 '18 at 23:28

-1

not sure if this is what you are looking for but HTML validators are always an option

<input  type="number">

This won't allow users to put in anything but numbers and you don't have to parse it as it will be set as a number not a string.

answered May 31 '18 at 23:28

Stephen DuMont

1,574
1
11
5

This does not answer the question, but is useful to someone new to web dev. So have an upvote! :) – Web Dev Sep 14 '18 at 07:27

Angular 2 Form Validation For Numbers minimum and maximum

4 Answers4