Topic: Trigger Input Error Message on Submit

tmlinc pro asked 4 years ago


I understand how to display the input validation once the input field loses focus using the [validateError]="true" and [errorMessage]="errorMessage" attributes. What I want to know is how to achieve the same effect (i.e. input bottom border changes to red and the error message is displayed) if a form is submitted without ever setting focus on the input.  
 <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
      <div class="md-form">
        <input class="form-control"
               id="email"
               name="email"
               type="text"               
               formControlName="email"
               mdbInputDirective
               [validateError]="true"
               [validateSuccess]="false"
               [errorMessage]="errorMessage">
        <label for="email">Email</label>
      </div>
      <div class="md-form">
        <input class="form-control"
               id="password"
               name="password"
               type="password"
               formControlName="password"
               mdbInputDirective
               [validateError]="true"
               [validateSuccess]="false"
               [errorMessage]="errorMessage">
        <label for="password">Password</label>
      </div>
      <button class="btn-block waves-light"
      		type="submit"
      		color="primary"
      		mdbBtn
      		mdbWavesEffect>Login</button>
    </form>


Arkadiusz Idzikowski staff answered 4 years ago


Dear tmlinc, There is 'updateOn: 'submit' method in reactive forms. Unfortunately, there are some problems with our directive that we need to fix, because it doesn't work as expected in that case. Regards, Arek

MHarmony pro commented 4 years ago

Any update on fixing this? This is a pretty normal feature to have.


Arkadiusz Idzikowski staff commented 4 years ago

Sadly, this problem has not been fixed yet.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.2
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No