NOTE: This scenario is the same as the one from this question: Data binding parent-child relationships in Aurelia
The Code:
usage:
<form role="form" id="formShipment" breeze-validation.bind="shipment">
<widget-picker widget.bind="shipment.widget" widgets.bind="widgets"></widget-picker>
</form>
widget-picker.js
import {bindable, bindingMode} from 'aurelia-framework';
export class WidgetPicker {
@bindable({ defaultBindingMode: bindingMode.twoWay }) widget;
@bindable widgets;
}
widget-picker.html
<select value.bind="widget">
<option repeat.for="widget of widgets" model.bind="widget">${widget.name}</option>
</select>
<!-- Some other UI stuff that I would rather not turn red if the above fails validation-->
The Problem:
I am trying to build a componentized UI and have a single control/element that controls selecting a Widget (widget-picker
).
But I also need to have breeze know that shipment.widget
is required (and show it on the widget control.)
But there are two things blocking this.
- In aurelia-validation.js the
subscribe
method only looks at the bindings on the view that has the breeze-validation custom attribute. This could easily be fixed by looking at the view's controllers views (and get the bindings on that):
this.view.controllers.forEach(function (controller) {
if (controller.view) controller.view.bindings.forEach(function (binding) {
existingListOfCurrentViewsBindings.push(binding)
})
})
- But because
shipment.widget
passes through an@bindable
it does not have asource
property. This means that even if aurelia-validation had looked at the child custom elements, the current method of finding the breeze property would fail.
The Question:
Is there a way to get aurelia-breeze to support validating into custom elements (on the control that failed)?
NOTE: I could just have the validation show up in a general validation area, but since most of my UI runs as custom-elements, I would have almost all my UI that way. This is not nearly as user friendly as something near the control that has failed.