Правила и стили проверки Q-редактора Quasar WYSIWYG

У меня есть форма с полем WYSIWYG, и я использую элемент Quasar q-editor . Я хочу добавить проверку в это поле с помощью правил и стилей, аналогичных другим полям, таким как q-input , q-select и т. д.

Пример для проверки q-входа:

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

Результат:

Этот пример для обязательного поля WYSIWYG не работает:

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

Есть похожие вопросы здесь и здесь (с одним возможным решением).

validation styles vuejs3 wysiwyg quasar-framework

05.10.2022 10:28

Зод: сила проверки и преобразования данных

Сегодня я хочу познакомить вас с библиотекой Zod и раскрыть некоторые ее особенности, например, возможности валидации и трансформации данных, а также...

Валидация полей ввода для базовой формы React

В одном из моих проектов MERN Stack есть форма с именем, фамилией, контактным номером, адресом, электронной почтой, датой рождения, номером NIC, весом...

Пользовательские правила валидации в Laravel

Если вы хотите создать свое собственное правило валидации, Laravel предоставляет возможность сделать это. Создайте правило с помощью следующей...

244

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

На самом деле логика Quasar заключается в использовании элемента-обертки q-field . Возможно, стоит добавить описание на странице q-editor.

Я заворачиваю q-editor в q-field. Когда q-editor находится в template #control на q-field, val для проверки val => !!val || 'Field is required' является содержимым q-editor. Возможно, причина в том, что v-модель одинакова для двух элементов.

Проблема в том, что при сбое проверки граница q-field становится красной, а не q-editor. Для этой проблемы я использую решение из второй ссылки в вопросе - добавлен собственный стиль к границе q-editor, а q-field - это 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: #C10015' : ''"/>
      </template>
    </q-field>

Результат:

Вот пример CodePen.

05.10.2022 10:28