Topic: BUG errorMessage NOT WORKING AT ALL!!

Lesther Caballero pro asked 5 years ago

I'm adding validations to a form input (email type), and I have the error message saved in a function which returns different strings depending whether the field is required or is an invalid email format, that function is passed in errorMessage  directive, however, the errorMessage  ALWAYS shows the error when the input is required, ie, when the input has a wrong format email passed, it shows the string for the required-field case.  However, if I console.log the error message, it works as expected, so the console.log shows the right string but the  errorMessage  does not!! Here's my code. It's pretty simple to replicate this bug:   Typescript:   import { Component, OnInit } from '@angular/core'; import { Validators, FormBuilder } from '@angular/forms'; import { Router } from '@angular/router'; import {ValidationsService} from '../../../services/validations/validations.service'; import {ToastService} from 'ng-uikit-pro-standard'; import {AuthService} from '../../../services/user/auth/auth.service'; import {SharedService} from '../../../services/shared/shared.service'; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'] }) export class LoginComponent implements OnInit { public user; public submiting=false; public captchaProcessed=false; private toastOptions = this.sharedService.toastOptions; public itemForm = ({ email: ['',[Validators.required,]], password: ['',[Validators.required]] }); constructor(private router: Router, private authService:AuthService, private validationService:ValidationsService, public sharedService:SharedService, private fb: FormBuilder, private toast: ToastService) { this.user={}; } ngOnInit() { } public login(){ this.submiting=true; this.itemForm.disable(); this.authService.login(this.itemForm.value) .then(()=>{ this.toast.success('Logged in successfully','Welcome', this.toastOptions); }).catch((err)=>{ this.submiting=false; this.itemForm.enable(); this.toast.error(err.message,'', this.toastOptions); }); } public handleCorrectCaptcha(e){ this.captchaProcessed = true; } public emailErrorMessage():string{ if (this.itemForm.get('email').hasError('email')) { console.log('not an email') return 'Not an email'; } else if(this.itemForm.get('email').hasError('required')){ console.log('required'); return 'This field is required!'; } else{ return ''; } } }       HTML:   <div class="row no-gutters justify-content-center pb-4"> <div class="col col-md-4 col-sm-8"> <div class="card card-cascade"> <div class="view view-cascade gradient-card-header light-blue darken-4"> <h2 class="h2-responsive mb-2">Login</h2> </div> <mdb-progress-bar *ngIf="submiting" class="progress primary-color-dark" mode="indeterminate"></mdb-progress-bar> <div class="card-body"> <form [formGroup]="itemForm" (ngSubmit)="login()"> <div class="pb-2 md-form"> <i class="fa fa-envelope prefix grey-text"></i> <input type="text" id="orangeForm-email" [errorMessage]="emailErrorMessage()" class="form-control" required formControlName="email" name="email" mdbInputDirective> <label for="orangeForm-email"> Email </label> </div> </form> </div> </div> </div> </div>   I'll also attach screenshot showing the inconsistences between console.log and errorMessage directive:   This is not only happening with email validations, it's happening with ANY validation and any input type all over my app. I need urgent help, since my apP will go to production next week with your framework.

Damian Gemza staff answered 5 years ago

Dear Lesther, Thanks for your report! We'll fix this with next release of MDB Angular. For now, please use my sample code to achieve dynamically changing of input errors. You can create a success indicators in similar way.
@HostListener('input', ['$event']) oninput(event: any) { => {

if (element.classList.contains('text-danger')) {

try {


} catch (error) { }




getErrors(el:any) {

if (this.contactForm.get('contactFormEmail').hasError('required')) {

if (el!==undefined) {

el.innerText='Element is required';


} else if (this.contactForm.get('contactFormEmail').hasError('email')) {

if (el!==undefined) {

el.innerText='Email is invalid';



Best Regards, Damian

Lesther Caballero pro commented 5 years ago

Thanks!! Great work

Damian Gemza staff commented 5 years ago

This workaround won't be necessary in 6.2.2 release. Best Regards, Damian

Please insert min. 20 characters.


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



Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes