Quasar WYSIWYG q-editor validation rules and styles

Question

I hava a form with WYSIWYG field and I use Quasar's q-editor element. I want to add validation to that field with rules and styles similar to other fields like q-input, q-select etc.

Sample for q-input validation is:

<q-input v-model="model" label="Name" :rules="[val => !!val || 'Field is required']" />

Result:

This example for required WYSIWYG field doesn't work:

<q-editor v-model="editor" min-height="5rem" :rules="[val => !!val || 'Field is required']" />

There are similar questions here and here (with one posible solution).

Answer 1

Actually Quasar logic is to use q-field wrapper element. Maybe it is a good idea to be added as desctription in q-editor page.

That I do is wrap q-editor in q-field. When q-editor is in template #control on q-field, val for validation val => !!val || 'Field is required' is the content of q-editor. Maybe the reason is that the v-model is same for the two elements.

The problem is when validation failed, then the border of the q-field becomes red, and not of the q-editor. For this problem I use solution from the second link in the question - added custom style to border of q-editor and q-field is borderless.

<q-field ref="fieldRef" v-model="editor" label-slot borderless
      :rules="[val => (!!val && val !== '<br>') || 'Field is required']" >
      <template #label>Description</template>
      <template #control>
        <q-editor v-model="editor" min-height="5rem" class="full-width"
          :style="fieldRef && fieldRef.hasError ? 'border-color: var(--q-negative)' : ''"/>
      </template>
    </q-field>

Result:

Here is the CodePen example.