has valdemort on text area ever been attempted?

[tatsujb]

       <div class="ec-eai-edit-block">
          <textarea matInput class="ec-eai-text-area"
                    placeholder="{{'eai.informations.details_placeholder' | translate}}"
                    [formControl]="detail">
          </textarea>
          <val-errors controlName="detail" class="error-color">
            <ng-template valError="detailInvalid">{{ 'eai.errors.invalid_detail_motive' | translate }}</ng-template>
            <ng-template valError="detailLength">{{ 'eai.errors.detail_length_motive' | translate }}</ng-template>
          </val-errors>
       </div>

I feel like this has never been attempted before.

I'm getting a weird bug where the valError only shows up if there's been at least one unfocus on that textarea in the life of the component.

if there has already been an unfocus no matter the age of the component, it can be a million years old, the bug will never happen again.

But as soon as you destroy and re-create the component it happens again until unselected.

Note that as long as the first unselect hasn't happened you can test valid and invalid form cases and the bug will happen continuously.

Meanwhile the form valid/invalid state is correctly switching as attested by the disabling/enabling of the validate button also linked to the form.

(as well as console logs on the form's validating function)

So this is neither a bug of no form init or other lack of init, nor a "happens only once on first state change" bug.

both of which I know how to debug.

this however is particularly new and only happens for me with textarea fields, not inputs.

are textareas not supported on valdemort?

[cexbrayat]

👋 Hi @tatsujb

textarea is supported by ngx-valdemort: we have this use-case in a lot of our projetcts. So there should be no issue.

Note that the behaviour you describe looks normal (if I understand correctly): ngx-valdemort displays the errors when the control is "touched" as Angular says (when the focus is lost) or when the form is submitted. You can check out the demo on the documentation page https://ngx-valdemort.ninja-squad.com/#/

If you want to have a different behaviour, like displaying the errors right away, you can configure ngx-valdemort using the ValdemortConfig service, as explained at the bottom of the documentation page:

constructor(config: ValdemortConfig) {
  config.errorsClasses = 'text-warning';
  config.displayMode = DisplayMode.ONE;
  config.shouldDisplayErrors = (control, form) => control.dirty;
}

I hope this helps! If you think there still is a problem, please provide a tiny reproduction (either on stackblitz or a small github repo) so we can investigate 🧐