radio-group: add tighter integration with ng-messages and form validation

[codymikol]

Bug, enhancement request, or proposal: Enhancement Request

CodePen and steps to reproduce the issue:

Radio Required Demo which demonstrates the issue: Yes 🐔

Detailed Reproduction Steps:

Open up the codepen and you will see that ng-messages does not function with md-radio-group as it does with other components.

What is the expected behavior?

I expect ng-messages to function like it does with md-input, looking something like this

What is the current behavior?

Currently the required message shows up before the form is submitted and does not have the expected styling.

What is the use-case or motivation for changing an existing behavior?

I have a questionnaire form that is made entirely of md-radio-groups and having some indication that the validation of the group has failed would be very useful.

Which versions of AngularJS, Material, OS, and browsers are affected?

• AngularJS: 1.7.5
• AngularJS Material: 1.1.11
• OS: all
• Browsers: all

Is there anything else we should know? Stack Traces, Screenshots, etc.

I would be willing to work on this enhancement if a green light is given. This would be very useful for my project 🐔

[Splaktar]

Are you only looking for support for ng-required or are you wanting it to work for form validation in general?

This is related to

• md-radio-group: required doesn't work #1305
• Validating radio buttons in md-radio-group? #1456 seems to have a couple workaround suggestions and some feedback from the Material Design team
• radio-group: formatting issue when inside md-input-container with label #5834 talks about supporting use with md-input-container which is what we do with md-select
• radio-button: support an inline form style #8582 talks about how md-radio-group doesn't line up automatically when used with md-input-container elements in a form

Please note the exact versions instead of "latest" as sometimes these reports get looked at months later and the versions may be quite different.

[codymikol]

I guess my title is a little ambiguous.
Sorry about that, It looks like both required and ng-required technically work when used with md-radio-group. It properly sets the form to valid / invalid and ng-submit works, but the styling is inconsistent with md-input-container as shown in my example images. I don't think it's necessary to add support for md-input-container if there is a way to make ng-messages compatible with md-radio-group. That's actually probably a more appropriate title.

[Splaktar]

Based on your demo, I have some feedback:
The md-radio-group docs specify that it can only contain md-radio-buttons. So you shouldn't put labels inside of the radio group. The following works with less custom styles required.

        <label>Which Option?</label>
        <md-radio-group name="radio-group" ng-required="true" ng-model="ctrl.testTwo">
          ...

For the expectations listed

1. The ng-message for required will only show up once the form is submitted

You can do this today via ng-messages="ctrl.formOne.$submitted && ctrl.formOne.radioGroup.$error" and calling $setSubmitted() on the form when it is submitted. I've done this in my updated CodePen.

2. The ng-message will animate in like other validations messages

This is part of md-input-container. You could either add support for using md-radio-group inside of md-input-container, which could get messy, or you could re-implement the ngAnimate code needed for the animations in either your app or within md-radio-group with an API to opt into it.

3. The label will have an asterisk added when required

This is part of md-input-container. The MD spec makes no affordance for floating labels being used with radio buttons. This is one reason why integrating with md-input-container could be a problem. Since md-radio-group labels are user managed, users can add the asterisk and custom styles as desired. I've done this in my updated CodePen.

4. If the form is submitted and a group is invalid, it will scroll into view.

This is currently only supported with native inputs like input and possibly textarea within md-input-container. This is not supported with md-select within a md-input-container. I think that supporting this for either md-select in a md-input-container or md-radio-group is complex enough to take that discussion to separate, new enhancement requests.

5. If the form is submitted and a group is invalid choices will also be red like in hack link.

There is no guidance in the MD spec for validation styling of radio groups or radio buttons that I have been able to find. Based on reviewing the existing validation styling for inputs, my feeling is that it makes sense to make the label red and possibly add a red border to the md-radio-group. I've done this in my updated CodePen.

I'm not sure that changing the label of every radio button to red would be desirable or expected. Can you provide any examples of this in the wild or portions of the spec that might suggest that this would be expected?

[codymikol]

The ng-message for required will only show up once the form is submitted

You can do this today via ng-messages="ctrl.formOne.$submitted && ctrl.formOne.radioGroup.$error" and calling $setSubmitted() on the form when it is submitted. I've done this in my updated CodePen.

While this works, it does seem to be inconsistent with how ng-messages are implemented within other directives.

I would expect ng-messages="ctrl.formOne.radioGroup.$error" to function. I also would not expect to have to explicitly call $setSubmitted when using ng-submit

The ng-message will animate in like other validations messages

This is part of md-input-container. You could either add support for using md-radio-group inside of md-input-container, which could get messy, or you could re-implement the ngAnimate code needed for the animations in either your app or within md-radio-group with an API to opt into it.

I think it does make sense to support md-radio-group within md-input-container as that is a standard wrapper for multiple components.

I think if eventually all data components have the same md-input-container support it will be a lot easier to reason about validation / labeling / custom styling.

I think it will be difficult to implement, but definitely achievable.

The label will have an asterisk added when required

This is part of md-input-container. The MD spec makes no affordance for floating labels being used with radio buttons. This is one reason why integrating with md-input-container could be a problem. Since md-radio-group labels are user managed, users can add the asterisk and custom styles as desired. I've done this in my updated CodePen.

I don't think it necessarily has to be a floating label, just some kind of label for the group in general that displays above the group. I think if the md-input-container has context over which data component it contains we can use different labels.

If the form is submitted and a group is invalid, it will scroll into view.

This is currently only supported with native inputs like input and possibly textarea within md-input-container. This is not supported with md-select within a md-input-container. I think that supporting this for either md-select in a md-input-container or md-radio-group is complex enough to take that discussion to separate, new enhancement requests.

Agreed, this is something that I'd definitely like to see implemented for other data components. Would you like me to make tickets for components that do not have this feature?

If the form is submitted and a group is invalid choices will also be red like in hack link.

There is no guidance in the MD spec for validation styling of radio groups or radio buttons that I have been able to find. Based on reviewing the existing validation styling for inputs, my feeling is that it makes sense to make the label red and possibly add a red border to the md-radio-group. I've done this in my updated CodePen.

I agree with this, I think the CodePen you provided looks great.

I'm not sure that changing the label of every radio button to red would be desirable or expected. Can you provide any examples of this in the wild or portions of the spec that might suggest that this would be expected?

I think your example is much nicer where just the label and the ng-messages are red. Mine was just an example to start a discussion.