hilla
hilla copied to clipboard
[Binder] Form validation problem with optional fields and custom validator on object level
Describe the bug
Using binder with a model having two optional fields and a custom validator on the object level (instead of field level) e.g.
this.binder.addValidator({
message: 'Error',
validate(value, binder) {
const result: Array<ValidationResult> = [];
if (value.startTime && value.stopTime && (value.startTime >= value.stopTime)) {
result.push({
message: 'Must be after start time',
property: model.stopTime,
});
}
return result;
}
});
the validator is only called for the first time the field gets blurred and the invalid state of the field doesn't get updated on future modifications.
The bug can be "fixed" if you modify the binders defaultValue and add a value for the field which can get invalid, which causes BinderNode.getChildBinderNodes() to emit this child node in case of validation update. But you have to remember to adjust binders defaultValue every time after the defaultValues gets modified e.g. binder.read()
Expected-behavior
I expect that the invalid status (and error message) gets updated every time the field is changed by the user
Reproduction
Here is a modified starter project which demonstrates the bug. Just follow the instructions in the browser. The interesting code changes are only in frontend/views/main-view.ts
System Info
Hilla 2.5.7