Material: Validating radio buttons in md-radio-group?

[demisx]

Hi. I am not clear on how to make a radio group required. Taking this as an example:

<md-radio-group ng-model="vm.color" name="color">
  <md-radio-button value="1">
    Blue
  </md-radio-button>
  <md-radio-button value="2">
    White
  </md-radio-button>
</md-radio-group>

I've tried adding reqiured to the group tag and individual button tags, but nothing happens. Thank you.

[demisx]

Bump. Do you guys know of a way to make an md radio button group required?

[demisx]

Adding ng-required="true" to md-radio-group makes the radio group required:

<md-radio-group ng-required="true" ng-model="vm.color" name="color">
  <md-radio-button value="1">
    Blue
  </md-radio-button>
  <md-radio-button value="2">
    White
  </md-radio-button>
</md-radio-group>

Though, as mentioned in another post, not clear how to show the error message for it, since ng-messages aren't triggered until a user interacts with an input field and once he/she does, it's no longer invalid. I would like to provide clear visual guidance, so a user knows that the reason the submit button is still disabled, because he/she didn't select the radio button. Currently, the radio button group is just silently in invalid state. Any clues are appreciated.

[davidtmnolan]

Bump. Would love to see a solution for showing ng-messages for required radios.

[marcysutton]

We need to take a look at the required style for radio groups. Adding to our list of UX questions.

[ThomasBurleson]

@marcysutton - can you elaborate here what the UX Questions are for RadioGroup validations?

[ThomasBurleson]

The current proposal to the UX Design team is a solution where a message can appear below with the checkbox/radio turning red.

[epelc]

@demisx Is ng-required="true" stopping forms from submitting for you? I tried that and several other ways to require it and nothing stopped the form.

[demisx]

@epelc As I recall, the issue here was mainly that it wasn't clear how to deal with validation and displaying error message for the md-radio-group.

[stewwan]

+1
cant validate required with md-radio-group

[diegolaciar]

+1
Same issue md-radio-group +ng-requiered and ng-message

[PhilipCurra]

_I use ng-class, like this (inside my directive):_

    <td style="width:700px;"><span ng-class="condition.cls">{{condition.questions}}</span></td> 
    <td><md-radio-button value="yes">yes</md-radio-button></td>
    <td><md-radio-button value="no">no</md-radio-button></td>

_Then, I use an object for my questions, like this:_

       $scope.conditions = [
            {questions: 'will alcohol be sold?', answers: navigatorService.q[0], cls: ''},
            {questions: 'will alcohol be served?', answers: navigatorService.q[1], cls: ''}
            _and so on.  (you probably don't need the navigatorService thing.  I'm just using that to access info in another controller.)_
        ];

_and this is the stuff that makes it work:_

        $scope.processConditions = function () {
            $scope.validation();
            $scope.navigation();
        };

    $scope.validation = function () {
        for (var i=0;i<$scope.conditions.length;i++) {
            if ($scope.conditions[i].answers != undefined) {
                $scope.conditions[i].cls = '';
            } else {
                $scope.conditions[i].cls = 'radio-input-invalid';
            }
        }
    };

    $scope.navigation = function () {
        var proceed = true;
        for (var i=0;i<$scope.conditions.length;i++) {
            if (!$scope.conditions[i].answers) { proceed = false; }
        }
        if (proceed != false) {
            navigatorService.storage($scope.conditions);
            $state.go("portal.newEvent.step1");
        }
    };

_and finally, radio-input-invalid just makes the associated text turn red:
(and again, you probably can ignore the transition stuff, which just eases the change in color.)_

md-radio-button.md-default-theme .md-on {
  background-color:#14a014;
}
md-radio-button.md-default-theme.md-checked .md-off {
  border-color:#14a014;
}
.radio-input-invalid-add, .radio-input-invalid-remove {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s;
  -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s;
}
.radio-input-invalid,
.radio-input-invalid-add.radio-input-invalid-add-active {
  color:#d82b00;_  // this is the red color, here._
}
.radio-input-invalid-remove.radio-input-invalid-remove-active {
  color:dimgray;
}

_I hope this helps someone to apply validation to their radio buttons while waiting for a real fix._

[ThomasBurleson]

This issue is closed as part of our deprecation effort.
For details, see our post Spring Cleaning 2016.

[rvarbanov]

This is still an issue.

[jpstone]

+1

[gaurav5430]

@diegolaciar do you have a working pen or fiddle for your example with name="someName" ?

[diegolaciar]

@gaurav5430 No I don't. just posted that solution.. more than a year ago..