Topic: mdb-error fires too often
Hi,
I'm busy learning about reactive forms with MDB in Angular and tried to display input error messages using the mdb-error tag. So far it works, but I'm wondering why it fires as soon as I hover any element of the form, and apparently multiple times each time (seems to be correlated with the amount of form controls).
In your example, a *ngIf condition the error display:
<mdb-error *ngIf="input.invalid && (input.dirty || input.touched)">Input invalid</mdb-error>
In my case it calls a function which returns a translated error string:
<mdb-error [innerHTML]="getError('formName1')">Input invalid</mdb-error>
Is there a way to reduce the amount of calls, like only when the focus leaves the control ?
Thx
JMB
Hello,
You need to add the conditions from ngIf to avoid displaying messages all the time. You can also add updateOn: 'blur' option provided by Angular to validate control only on blur. There is an example in our documentation:
jmbouzard commented 6 years ago
Hello, Thanks for the tip. Unfortunately neither ngIf nor the blur validation reduce the amount of time the function is called. I also observed that the function is called as well in interaction with controls in the same form which don't have any mdb-error. For example the function is called 4 times every time a different option is hovered in a select control !!! There must be less intensive solutions... Regards JMB
Arkadiusz Idzikowski staff commented 6 years ago
At first I thought that the question was about problem in our directive. I think it's normal behavior when you use function inside template, because Angular executes template expressions after every change detection cycle. And change detection can be triggered by many asynchronous activities.
Considering that, you may want to change this function call to variable or take a look at impure pipes (depending on the logic of your application).
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 7.0.0
- Device: PC
- Browser: Chrome
- OS: Win10
- Provided sample code: No
- Provided link: No