瓦丁 14 : Mark error message at TextField as warning

Question

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

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



如何显示这样的(黄色)警告消息？



我尝试的是这样的:
在我的验证器的应用方法中，我创建了一个带有 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>

Answer 1

有一种方法可以达到这种效果。

首先你需要为 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)橙色。

然后在你的 View 中导入它:

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

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

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”类复制代码并选择蓝色。然后为信息条件创建第三个验证器。不要忘记添加“信息”类，并在其他验证器条件(错误、警告)中将其删除。