miguelcobain
Validations for paper-checkbox
Angular Material clearly supports validation errors for checkboxes. I figured that means Ember Paper should as well. In fact I have use for checkbox validation in a project.
This just adds validation that the box is checked if required=true. The validation can only be triggered by submitting a parent form. I can't see use for any other type of validation or any other way to trigger it.
I think this is a fairly clean implementation. I renamed the existing paper-checkbox to paper-checkbox-main (perhaps there's a better name for that), and then created a wrapper component called paper-checkbox which adds the validation. I didn't actually use the ValidationMixin here - that seemed to be geared specifically towards text-based inputs.
If this gets merged, I can do something similar for paper-radio-group.
I’d definitely like error support for radio button groups! Is there anything missing from this that you’d like to see, @miguelcobain?
Checkbox validation would be nice to have - but why creating another component instead of adding validation support to the existing checkbox?
2 components are now necessary because we need one component to house the extra markup needed for validation, yet we need to one to contain the original checkbox, so that it can be used without validation inside paper-item. This separate component is also needed for the classNameBindings and the click action (both of which must be directly on the md-checkbox element).
It's a consequence of the markup we need to add for validation. This is the same markup used in angular-material, so when we use this markup we automatically get the proper styling.
@tyleryasaka with paper-input, for example, we didn't need any extra component. If errors are present, we render them, if not, we don't.
Can you please clarify this issue? We may be missing something. Could this be refactored into a single component?
So, I did try putting all of this into a single component. At first I ran into the issues I mentioned in my previous comment. To clarify those issues: for this to work, md-checkbox has to be wrapped in md-input-container. Therefore the tagName of the component now has to be md-input-container, and md-checkbox has to be rendered inside the template. So things like the click event handler and the classNameBindings no longer work.
After looking at the paper-input component I was able to address a couple of the issues I ran into; I was able to use inline if statements in the template instead of classNameBindings for the md-checked and md-indeterminate classes on the md-checkbox element. I was also able to add a click action to the md-checkbox element and handle the action in the paper-checkbox component. Not as clean, but it does work.
But I ran into a new issue. The component uses FocusableMixin - this needs to be directly on the md-checkbox element (not on md-input-container). Putting it on the container causes a blue outline to appear around the whole thing when it is clicked. The mixin obviously needs to stay on md-checkbox, but of course this will require a second inner component - exactly what I am doing in this PR. I really don't think there's a way to avoid having 2 separate components.
Does that clarify?