Form validation after clicking submit button in Angular 6

Question

I am developing an application using MEAN Stack with Angular 6. I have implemented a login page. When I click the login button without entering email and password it should give the validation messages below the relavant text field.

<small class="form-text error" *ngIf="email.invalid && email.touched &&  email.errors?.required"> 

      Email is required!
</small>

<small class="form-text error" *ngIf="password.invalid && password.touched && password.errors?.required">
      Password is required!
 </small>

What is happening now is if text field is touched and empty it gives the error messages. I want that functionality as well and also if we click the submit button without touching the text field also it should give that message. Here is the login.ts

login(): void {

    if (!this.user.email || !this.user.password){
      return;
    } 

    this.errors = this.messages = [];
    this.submitted = true;
    this.service.authenticate(this.strategy, this.user).subscribe((result: NbAuthResult) => {
      this.submitted = false;

      if (result.isSuccess()) {
        this.messages = result.getMessages();
      } else {
        this.errors = result.getErrors();
      }

      const redirect = result.getRedirect();
      if (redirect) {
        setTimeout(() => {
          return this.router.navigateByUrl(redirect);
        }, this.redirectDelay);
      }
      this.cd.detectChanges();
    });
  }

Things I have tried.

used a boolean variable for submiting attempt.

submitAttempt: boolean = false;

set it to true when text fields are empty.

 if (!this.user.email || !this.user.password){
this.submitAttempt=true;
      return;
    }

Used it in the html.

<small class="form-text error" *ngIf="email.invalid && email.touched &&  (email.errors?.required && submitAttempt)"> 
          Email is required!
</small>

<small class="form-text error" *ngIf="password.invalid && password.touched && (password.errors?.required && submitAttempt)">
           Password is required!
 </small>

Sunil Singh Sunil Singh · Accepted Answer · 2018-10-18T06:01:00

You have implemented in right direction. Just require small tweak as -

Move submitted at top in the function

ts

login(): void {

     this.submitted = true; //<-- this should be at top
    if (!this.user.email || !this.user.password){
      return;
    } 

    this.errors = this.messages = [];
    this.service.authenticate(this.strategy, this.user).subscribe((result: NbAuthResult) => {
      this.submitted = false;

      if (result.isSuccess()) {
        this.messages = result.getMessages();
      } else {
        this.errors = result.getErrors();
      }

      const redirect = result.getRedirect();
      if (redirect) {
        setTimeout(() => {
          return this.router.navigateByUrl(redirect);
        }, this.redirectDelay);
      }
      this.cd.detectChanges();
    });
  }

html

<small class="form-text error" *ngIf="email.invalid && ( email.touched || submitted) &&  (email.errors?.required)"> 
          Email is required!
</small>

Form validation after clicking submit button in Angular 6

2 Answers

ts

html