Vaadin 14：将 TextField 处的错误消息标记为警告答案

【问题标题】：Vaadin 14: Mark error message at TextField as warningVaadin 14：将 TextField 处的错误消息标记为警告
【发布时间】：2020-07-16 17:48:12
【问题描述】：

使用 Vaadin 14.1.23 TextFields 我想在视觉上区分红色错误消息（例如“此值太大。”）和黄色警告（例如“系统会将您的输入四舍五入到小数点后两位。”）。还可以选择蓝色信息消息。

因此，我创建了一个带有验证器的 TextField，如本例 (https://vaadin.com/components/vaadin-text-field/java-examples/validation)：当您在标签为“最少 2 个字符”的字段中键入“1”时，该字段变为红色并显示错误：“最少 2字符”。

如何显示这样的（黄色）警告消息？

我尝试的是这样的：在我的验证器的 apply 方法中，我创建了一个带有 ErrorLevel WARNING 的验证结果，如下所示：

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

但是 Vaadin 仍然生成了一个带有 part="error-message" 的 div：

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

【问题讨论】：

看这里：github.com/vaadin/vaadin-text-field/blob/… 和这里：github.com/vaadin/vaadin-text-field-flow/blob/… 我必须假设这是一个功能请求。至少应该改进文档。我建议创建一个带有额外 Span 的自定义组件，您现在可以使用它来显示警告。
我猜你是对的。我现在的解决方法是一个包含错误、警告和信息消息列表的网格。类似于 Eclipse 中的“问题”视图。这不是普遍可用的，但对于我的用例来说没问题。

标签： vaadin vaadin-flow vaadin10

【解决方案1】：

有一种方法可以实现这种效果。

首先您需要为vaadin-text-field 创建主题。在frontend/styles 文件夹中创建text-field-theme.css 文件，内容为：

: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")

然后您将字段与 2 个验证器绑定，一个带有错误条件，第二个带有警告条件：

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。

当您输入 4 或 5 个字符时，您将看到黄色警告消息，binder.validate().isOk() 将返回 true。

对于蓝色信息消息过程是相同的。只需在 .css 文件中为“info”类复制代码并选择蓝色。然后为信息条件创建第三个验证器。不要忘记添加“info”类，并在其他验证器条件（错误、警告）中将其删除。

【讨论】：