Form Validation empty field shown as invalid in Angular 2+

Question

I am trying to do some Form Validations on my form using reactive form validation. However, I run into some issues when checking a field that is touched and dirty.

Brief Example:

HTML:

<input id="name" class="form-control"
      formControlName="name" required >

<div *ngIf="name.invalid && (name.dirty || name.touched)"
    class="alert alert-danger">

  <div *ngIf="name.errors.required">
    Percent is required.
  </div>

  <div *ngIf="name.invalid">
    Number must be between 0 and 1
  </div>

</div>

Typescript:

name: ['', [Validators.min(0.0001),Validators.max(0.9999),Validators.required]],

So my form logic is correct. If I enter a number not between 0 and 1, I get only one return that says Number must be between 0 and 1. However, the problem lies when I click the field and then click out. I get both errors that "Number is required" AND "Number must be between 0 and 1". How would I structure my logic so that only the error message "Number is required" displays?

instead of name.invalid use <div *ngIf="name.errors.max || name.errors.min"> — Niladri
– Niladri, Commented May 10, 2019 at 20:18
also it's good to use Validators.Compose([Validators.min(0.0001),Validators.max(0.9999),Validators.required]) for multiple validators — Niladri
– Niladri, Commented May 10, 2019 at 20:19
I changed it to <div *ngIf="name.errors.max || name.errors.min"> and it worked! Thanks a lot! — Jack N
– Jack N, Commented May 10, 2019 at 20:24

Niladri · Accepted Answer · 2019-05-10 20:32:25Z

1

There is a small mistake in your *ngIf condition as you are using name.invalid which is always true for any kind of error. That's why you are seeing both messages at the same time.

instead of name.invalid change it to like below -

<input id="name" class="form-control"
      formControlName="name" required >

<div *ngIf="name.invalid && (name.dirty || name.touched)"
    class="alert alert-danger">

  <div *ngIf="name.errors.required">
    Percent is required.
  </div>

  <div *ngIf="name.errors.max || name.errors.min">
    Number must be between 0 and 1
  </div>

</div>

Now it will only show the message Number must be between 0 and 1 if the entered value is not between 0 and 1.

answered May 10, 2019 at 20:32

Niladri

5,9922 gold badges27 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Form Validation empty field shown as invalid in Angular 2+

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related