textarea with hydration (Angular v17)

[its-dibo]

when adding a textarea field, I got this error

main.ts:5 ERROR Error: NG0500: During hydration Angular expected a text node but the node was not found.

Angular expected this DOM:

<textarea rows="1" matinput="" class="mat-mdc-input-elementcdk-textarea-autosize" ng-reflect-id="formly_5_textarea_contacts_2" ng-reflect-required="true" ng-reflect-form="[objectObject]" ng-reflect-error-state-matcher="[objectObject]" cols="100" ng-reflect-field="[objectObject]" ng-reflect-placeholder="" tabindex="0" id="formly_5_textarea_contacts_2" required="" aria-required="true">
  #text(    )  <-- AT THIS LOCATION
  …
</textarea>

Note: attributes are only displayed to better represent the DOM but have no effect on hydration mismatches.

To fix this problem:
  * check the "FormlyFieldTextArea2" component for hydration-related issues
  * check to see if your template has valid HTML structure
  * or skip hydration by adding the `ngSkipHydration` attribute to its host node in a template

 Find more at https://angular.io/errors/NG0500
    at validateMatchingNode (core.mjs:18193:11)
    at locateOrCreateTextNodeImpl (core.mjs:25320:16)
    at ɵɵtext (core.mjs:25294:22)
    at FormlyFieldTextArea_Template (ngx-formly-material-textarea.mjs:46:12)
    at executeTemplate (core.mjs:11846:5)
    at renderView (core.mjs:14915:7)
    at renderComponent (core.mjs:14862:3)
    at renderChildComponents (core.mjs:14958:5)
    at renderView (core.mjs:14940:7)
    at ComponentFactory.create (core.mjs:15162:7)

field config:

 {
        key: 'contacts',
        type: 'textarea',
        props: {
          required: true,
          rows: 100,
          cols: 100,
        }
      }

important update
it seems that the first textarea field causes that the next select fields to be rendered wrong.
i.e. the drop-down doen't appear

[its-dibo]

another issue related to this, is that <select> drop-down menu doesn't shown even it has field.props.options[]

[RaminGe]

I had the same issue and the solution was really easy.

My code (broken):

<textarea [...]>
    </textarea>

Fixed:

<textarea [...]></textarea>

The whitespaces between the textarea texts resulted in the issue.

[its-dibo]

I use the built-in type textarea, not <textarea></textarea>

[aitboudad]

This issue has been fixed and released as part of v6.3.0 release.

Please let us know, in case you are still encountering a similar issue/problem.
Thank you!