Trigger Input Error Message on Submit

Topic: Trigger Input Error Message on Submit

tmlinc pro asked 6 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>

Add comment

Arkadiusz Idzikowski staff answered 6 years ago

0 0 Best answer

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 6 years ago

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

Arkadiusz Idzikowski staff commented 6 years ago

Sadly, this problem has not been fixed yet.

Add comment

Write

Create snippet

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

tmlinc

Pro User

12Support score
3Questions 0Answers

0Snippets likes 0Snippets