10

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.

1

4 Answers 4

21

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
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)]
})
3
  • Thank you very much for the answer :) Nov 21, 2016 at 6:10
  • 1
    @jkris - thx for example... But isn't it isValid = input >= max
    – JGFMK
    Aug 11, 2017 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 Jun 22, 2018 at 20:14
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>
1
  • 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 Nov 18, 2016 at 9:04
-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.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.