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"
            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

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.)