Topic: Bug with validation labels for a textarea in Modal
Giovanni De Stefano priority asked 4 years ago
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" rows="5" formControlName="foo"></textarea> <label for="fooModal">Some label</label> <mdb-error *ngIf="!isFieldValid('foo')">Field invalid</mdb-error> <mdb-success *ngIf="isFieldValid('foo')">Field valid</mdb-success> </div>
And I show the modal with modalRef.show()I 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
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.)
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
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
- User: 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