Ваадин 14: Пометить сообщение об ошибке в TextField как предупреждение - PullRequest
Новая
       104

Ваадин 14: Пометить сообщение об ошибке в TextField как предупреждение

3 голосов
/ 04 апреля 2020

с Vaadin 14.1.23 TextFields Я хотел бы визуально различать красные сообщения об ошибках (например, «Это значение слишком велико.») И желтые предупреждения (например, «Система округлит ваш ввод до двух десятичных знаков».). И, возможно, синие информационные сообщения.

Поэтому я создал TextField с валидатором, как в этом примере (https://vaadin.com/components/vaadin-text-field/java-examples/validation): когда вы вводите «1» в поле с меткой «Min» 2 символа », затем поле становится красным и выдает ошибку:« Минимум 2 символа ».

Vaadin TextField with error message

Как насчет отображения (желтого) предупреждающее сообщение, подобное этому?

Wanted Vaadin TextField with warning message

То, что я пытался сделать так: В методе apply моего валидатора я создал результат проверки с помощью ErrorLevel WARNING как это: 

ValidationResult.create("System will round the decimals.", ErrorLevel.WARNING);

Но Ваадин сгенерировал еще div с part = "error-message": 

<div part="error-message" aria-live="assertive" aria-hidden="false" id="my-field-error-44">System will round your input to two decimals.</div>

1 Ответ

2 голосов
/ 26 апреля 2020

Есть способ добиться этого эффекта.

Сначала вам нужно создать тему для vaadin-text-field. Создайте файл text-field-theme.css в папке frontend/styles с содержимым: 

:host([class="warn"]) [part="error-message"] {
    color: orange;
}

:host([invalid][class="warn"]) [part="input-field"] {
    background-color: rgba(255, 166, 0, 0.1);
    box-shadow: inset 0 0 0 1px orange;
}

. С этим кодом вы сказали: когда текстовое поле имеет класс «предупреждение», сообщение об ошибке оранжевого цвета, а рамка вокруг поля ввода оранжевого цвета и поля ввода фон прозрачный (0,1) оранжевый.

Затем импортируйте его в виде: 

@CssImport(value = "./styles/text-field-theme.css", themeFor = "vaadin-text-field")

Затем вы связываете поле с двумя валидаторами, один с условием ошибки, а второй с условием предупреждения: 

TextField textField = new TextField();
binder.forField(textField)
      .withValidator(e -> {
         textField.removeClassName("warn");
         return e.length() > 3;
      }, "You must enter more than 3 characters", ErrorLevel.ERROR)
      .withValidator(e -> {
         textField.addClassName("warn");
         return e.length() > 5;
      }, "Maybe you should enter more than 5 characters", ErrorLevel.WARNING)
      .bind(Person::getName, Person::setName);

Это будет работать с binder.validate().isOk(), как и ожидалось. Например, если вы введете 3 или менее символов, вы увидите красное сообщение об ошибке и binder.validate().isOk() вернет false.

error example

И когда вы введете 4 или 5 символов, вы увидите желтое предупреждающее сообщение и binder.validate().isOk() вернет true.

warning example

Для синего информационное сообщение процесс такой же. Просто продублируйте код в css файле для класса "info" и выберите синий цвет. Затем создайте третий валидатор для информационного условия. Не забудьте добавить класс «info» и удалить его в других условиях валидатора (ошибка, предупреждение).

...