Angular form input validation class for not typed in

Question

There are some CSS input validation classes for Angular forms pristine dirty and invalid. I have an input with a minimum length and I don't want an error message showing for this scenario:

user selects/focuses an input
unfocuses it without typing anything in it
re-focuses the input and begins typing, error message shows immediately saying minimum length not met.

The user may focus the input and decide not to enter anything for it and come back to it later, when they do the error message would show as soon as they type something in it.

i think pristine is what i'm looking for, might delete this question — el_pup_le
– el_pup_le, Commented Jul 14, 2017 at 12:03
Yes, that's what pristine and dirty are for, you can find examples here angular.io/guide/… — Nehal
– Nehal, Commented Jul 14, 2017 at 12:06
actually pristine can't really be used to solve the problem for this scenario, i'll keep the question open — el_pup_le
– el_pup_le, Commented Jul 14, 2017 at 12:10
Why not, if I may ask? If the user focuses that's touched but still pristine, only if the user types something, it will be dirty! Seems like fitting the case you listed. — Nehal
– Nehal, Commented Jul 14, 2017 at 12:13
as soon as the user types it will not be pristine, i've updated the question it should make more sense — el_pup_le
– el_pup_le, Commented Jul 14, 2017 at 12:18

Teddy Sterne · Accepted Answer · 2017-07-14 13:29:22Z

I played around with this for a bit and I think that you are correct that you can't get this behavior out of the box with what the reactive forms give you. You can, however, make a directive that will bind to a new class which will allow you to set the styling the way you desire.

You create a directive that listens to the Blur event on the FormControl and when it occurs check to see if the field is invalid. If it is you can set your own class and then base the styles off of this.

Example:

@Directive({
  selector: '[formControl]',
})
export class ValidationStatusDirective {
  isValidated = false;

  constructor(private el: ElementRef){}

  @HostBinding('class.ng-validated') get ngValidated() { return this.isValidated; }
  @HostBinding('class.ng-unvalidated') get ngUnvalidated() { return !this.isValidated; }

  @HostListener('blur') validationStatusChanged(){
    if(!this.isValidated &&
        this.el.nativeElement.classList.contains('ng-invalid') &&
        this.el.nativeElement.value.length > 0){
      this.isValidated = true;
    }
  }
}

You then don't have to modify the HTML at all and then just set the styling when the input is both ng-invalid and ng-validated

For reference:

<input class="form-control"
    [formControl]="name"
    #input
    placeholder="Enter 3 or more characters">

Styles:

input.ng-invalid.ng-validated{
    border-color: red;
    background-color: pink;
}

Demo

Nehal · Accepted Answer · 2017-07-14 12:25:32Z

0

I created this short version using angular doc's example that requires minimum length of 8 but doesn't show the error till user starts typing. Check if this is the case you are looking for.

Code demo

html:

<form (ngSubmit)="onSubmit()" #heroForm="ngForm">
   <div class="form-group">
     <label for="name">Name</label>
    <input type="text" class="form-control" id="name"
           minlength="8"
           [(ngModel)]="model.name" name="name"
           #name="ngModel">
    <div [hidden]="name.valid || name.pristine"
         class="alert alert-danger">
      Name should be at least 8 characters
    </div>
  </div>
 <!-- - -->
</form>

answered Jul 14, 2017 at 12:25

Nehal

13.3k4 gold badges48 silver badges59 bronze badges

Collectives™ on Stack Overflow

Angular form input validation class for not typed in

2 Answers 2

Demo

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related