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

Question

在 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>

- S. Doe

---

请查看这里：https://github.com/vaadin/vaadin-text-field/blob/1b9de983eca78db6d97e8d83ea8277af821ac248/src/vaadin-text-field.html#L34 和这里：https://github.com/vaadin/vaadin-text-field-flow/blob/07cd7fc2329da3ba1106c1302648899e384db416/vaadin-text-field-flow/src/main/java/com/vaadin/flow/component/textfield/GeneratedVaadinTextArea.java#L457。我必须假设这是一个功能请求。至少应该改进文档。 我建议创建一个自定义组件，其中包含一个额外的 Span，您可以使用它来显示警告。 - thi gg

我想你是对的。我现在的解决方法是使用一个包含错误、警告和信息消息列表的网格，类似于Eclipse中的“问题”视图。这不是通用的，但对于我的用例来说还可以。 - S. Doe

Answer 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;
}

使用这段代码，您可以设置当文本字段具有类名“warn”时，错误消息为橙色，并且输入字段周围的框和输入字段的背景都为透明橙色（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。

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

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

- nemojmenervirat