Angular Material : make a md-radio-group required

Question

I am working with Angular Material, I need to make a radio group required, so that the user has to select a radio button, before he can submit the form. So the form should be invalid while no radio button is selected.

this is the code

<form id="pipelineForm" name="pipelineForm" ng-submit="processForm()" flex layout="column" novalidate>
    <md-radio-group ng-model="parameters.selected" ng-required="true" name="analyzerRG" 
              <md-radio-button ng-value="choiceObj" ng-repeat="choiceObj in parameters.choices" ng-required>
              {{choiceObj.text}}
              </md-radio-button>
    </md-radio-group>
</form>

i have tried making individual <md-radio-button> required, giving name to the radio group and using ng-messages for required , but to no avail. When i check the md-radio-group in chrome element inspector, it always has the class="ng-valid ng-valid-required" .

I can probably check the parameters.selected property for validating the form on my own, but i would like if the correct classes are applied to the md-radio-group and so the form is automatically invalid.

P.S. : There is a similar issue on Angular Material Github, but it seems to be closed now and the suggestions do not seem to work for me.

Answer 1

Check the solution on CodePen (https://codepen.io/jakobadam/pen/xqZoBR) as mentioned in the issue thread

https://github.com/angular/material/issues/1305#issuecomment-350047026

<md-input-container class="md-input-has-value" 
       ng-class="{ 'md-input-invalid' : form.fruit.$invalid && form.$submitted }">
  <label class="md-required" translate>Fruit</label>

  <md-radio-group md-autofocus name="fruit" ng-model="fruit" layout="row" required>
    <md-radio-button value="Apple" class="md-primary">Apple</md-radio-button>
    <md-radio-button value="Banana"> Banana </md-radio-button>
    <md-radio-button value="Mango">Mango</md-radio-button>  
  </md-radio-group>

  <div ng-messages="form.fruit.$error">
    <div ng-message="required" translate>Yo. Select some fruit.</div>
  </div>
</md-input-container>