如何将验证状态传递给CustomField子组件，实现错误字段高亮？

核心思路 #

CustomField默认会将自身作为验证错误的载体，导致子组件无法自动感知错误状态。要实现子字段高亮，需要把Binder的验证错误映射到内部子组件，同时保证整体验证逻辑的一致性。

具体实现方案 #

方案一：给子字段单独绑定验证规则（推荐） #

直接在PersonField内部为name输入框和birth日期选择器设置独立验证规则，既保留外部Binder对Person对象的整体验证，又让子字段自身触发错误高亮。

示例代码：

public class PersonField extends CustomField<Person> {
    private final TextField nameField = new TextField("姓名");
    private final DatePicker birthField = new DatePicker("出生日期");

    public PersonField() {
        add(nameField, birthField);
        
        // 姓名非空验证
        nameField.setRequiredIndicatorVisible(true);
        nameField.addValidator(value -> {
            if (value == null || value.trim().isEmpty()) {
                throw new ValidationException("姓名不能为空");
            }
        });
        
        // 出生日期合理性验证（禁止未来日期）
        birthField.addValidator(date -> {
            if (date != null && date.isAfter(LocalDate.now())) {
                throw new ValidationException("出生日期不能是未来日期");
            }
        });
    }

    @Override
    protected Person generateModelValue() {
        return new Person(nameField.getValue(), birthField.getValue());
    }

    @Override
    protected void setPresentationValue(Person person) {
        if (person != null) {
            nameField.setValue(person.getName());
            birthField.setValue(person.getBirth());
        } else {
            nameField.clear();
            birthField.clear();
        }
    }
}

外部使用Binder时，只需绑定PersonField，子字段错误会自动高亮，同时可继续添加整体验证逻辑：

Binder<Person> binder = new Binder<>(Person.class);
PersonField personField = new PersonField();

// 整体验证：姓名长度不小于2位
binder.forField(personField)
      .withValidator(person -> person.getName() != null && person.getName().length() >= 2,
                     "姓名长度不能少于2位")
      .bind(Person::getName, Person::setName);

方案二：在CustomField内部监听外部验证状态 #

如果完全依赖外部Binder的验证逻辑，可在PersonField中监听自身的验证状态变化，将错误映射到对应子字段。

示例代码：

public class PersonField extends CustomField<Person> {
    private final TextField nameField = new TextField("姓名");
    private final DatePicker birthField = new DatePicker("出生日期");
    private final Binder<Person> internalBinder = new Binder<>(Person.class);

    public PersonField() {
        add(nameField, birthField);
        
        // 内部绑定子字段与Person对象
        internalBinder.forField(nameField)
                      .bind(Person::getName, Person::setName);
        internalBinder.forField(birthField)
                      .bind(Person::getBirth, Person::setBirth);
        
        // 监听自身验证状态，同步子字段错误
        addValidationStatusChangeListener(event -> {
            // 先清除所有子字段错误状态
            nameField.setInvalid(false);
            birthField.setInvalid(false);
            
            if (event.isError()) {
                for (ValidationResult error : event.getValidationResults()) {
                    String errMsg = error.getErrorMessage();
                    // 根据错误信息匹配对应子字段（建议验证时明确标记字段，而非依赖文本关键词）
                    if (errMsg.contains("姓名")) {
                        nameField.setErrorMessage(errMsg);
                        nameField.setInvalid(true);
                    } else if (errMsg.contains("出生日期")) {
                        birthField.setErrorMessage(errMsg);
                        birthField.setInvalid(true);
                    }
                }
            }
        });
    }

    @Override
    protected Person generateModelValue() {
        return internalBinder.getBean();
    }

    @Override
    protected void setPresentationValue(Person person) {
        internalBinder.setBean(person);
    }
}

方案三：外部Binder验证时手动更新子字段状态 #

在外部绑定PersonField时，自定义验证器并手动控制子字段的错误状态（需PersonField提供子字段的访问方法）。

示例代码：

Binder<Person> binder = new Binder<>(Person.class);
PersonField personField = new PersonField();

binder.forField(personField)
      .withValidator(person -> {
          boolean isValid = true;
          
          // 验证姓名并更新状态
          if (person.getName() == null || person.getName().trim().isEmpty()) {
              personField.getNameField().setInvalid(true);
              personField.getNameField().setErrorMessage("姓名不能为空");
              isValid = false;
          } else {
              personField.getNameField().setInvalid(false);
          }
          
          // 验证出生日期并更新状态
          if (person.getBirth() != null && person.getBirth().isAfter(LocalDate.now())) {
              personField.getBirthField().setInvalid(true);
              personField.getBirthField().setErrorMessage("出生日期不能是未来日期");
              isValid = false;
          } else {
              personField.getBirthField().setInvalid(false);
          }
          
          return isValid;
      }, "信息填写有误")
      .bind(Person::getName, Person::setName);

关键注意点 #

• Vaadin输入组件通过setInvalid(true)触发错误高亮样式，需确保该方法被正确调用。
• 使用内部Binder时，要注意与外部Binder的数据同步，避免出现数据不一致。
• 错误匹配逻辑尽量避免依赖错误文本关键词，建议在验证时明确标记错误对应的字段。

内容的提问来源于stack exchange，提问作者Giuseppe Manzo