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 = this.fb.group ({
email: ['',[Validators.required, Validators.email]],
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:
https://drive.google.com/open?id=19NRnkM2ymxPmhyBCInbjmUskDrsxajKf
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.
