Topic: Bug with validation labels for a textarea in Modal

Giovanni De Stefano priority asked 5 years ago

Expected behavior

When placing a text area with validation in a form in a modal as follows:

<div class="md-form mt-3">
  <textarea mdbInput mdbValidate type="text" class="md-textarea form-control" id="fooModal"
  <label for="fooModal">Some label</label>
  <mdb-error *ngIf="!isFieldValid('foo')">Field invalid</mdb-error>
  <mdb-success *ngIf="isFieldValid('foo')">Field valid</mdb-success>

And I show the modal with expect the modal to be rendered, the form not being validated yet and the text area show the text 'Valid field' or 'Invalid field' according to the validation but

Actual behavior

The modal seems to render twice (animation runs twice), the form is validated as soon as the second animation completes showing 'Invalid field'.

If I remove:

<mdb-error *ngIf="!isFieldValid('foo')">Field invalid</mdb-error>
<mdb-success *ngIf="isFieldValid('foo')">Field valid</mdb-success>

Then the modal renders only once and the form is not immediately validated but I obviously do not have the 'Valid field' or 'Invalid field' labels.

Note that everything works as expected for all other form elements present in the modal (input and mdb-select).

How can I fix this behavior?

Resources (screenshots, code snippets etc.)

Giovanni De Stefano priority answered 5 years ago

I found the root cause: a bug in my code (ops...)

The bug is in using !isFieldValid instead of using a dedicated function isFieldInvalid that actively checks for form.invalid

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

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 7.5.1
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: No