Angular Material：如何验证表中的md-radio-button？

Question

如何验证md-radio-button是否未被选中？我尝试添加div消息和div消息，但它似乎不起作用。

<table class="table" ng-init="GetQuestionnaires()" ng-model="cd.id"> 

    <tr> 
    <th>Title</th> 
    <th>Actions</th> 
    </tr> 

    <tr class="monster-gray" ng-repeat="q in questionnaireData | filter: search " repeat-complete> 
    <td>{{q.Title}}</td> 
    <td>{{q.Author.FirstName}}, {{q.Author.LastName}}</td> 

    <td> 
     <md-radio-group ng-model="cd.id" required > 
     <md-radio-button value="{{q.Id}}"></md-radio-button> 
     </md-radio-group> 

    </td> 
    </tr> 
</table> 

Answer 1

添加一个包装您的<table>形式和包装你<md-radio-group>到<md-input-container>。你的代码可能看起来类似于此：

<form name="aForm" novalidate> 
    <table> 
    ... 
    <tr ng-form="trForm" ...> 
     <md-input-container> 
     <md-radio-group ng-model="cd.id" 
         name="cd" 
         ng-required="true"> 
      <md-radio-button ng-value="q.Id"> 
      Select me 
      </md-radio-button> 
     </md-radio-group> 

     <!-- Validation messages --> 
     <div ng-show="aForm.submitted" ng-messages="trForm.cd.$error"> 
      <div ng-message="required">This field is required!</div> 
     </div> 
     </md-input-container> 

的trForm需要的，因为你有一个ngRepeat，你需要验证对一个行，而不是整个表单。

Answer 2

我能够通过使用ng-required实现类似。在md-radio-group上添加ng-required="true"，并在提交表单前检查。

<form name="myForm" ng-submit="$myForm.$valid && vm.submitForm()"> 
 
    <md-radio-group ng-model="cd.id" ng-required="true"> 
 
    <md-radio-button value="{{q.Id}}"></md-radio-button> 
 
    </md-radio-group> 
 
</form>

Answer 3

我就遇到了这个问题。我有几个需要的MD按钮组，我需要提醒用户需要选择。向md-radio-group添加“required”将停止提交，ng-required =“true”也会停止，但我无法显示ng消息。看起来AngularJava团队没有追求AngularJS的修复，所以我做了一个CSS工作。

这是HTML：

<form class="formClass" name="formName" novalidate ng-submit="formName.$valid && functionToCall()"> 
    <md-radio-group ng-model="hasAnswer" name="hasAnswer" required> 
     <md-radio-button ng-value="true">YES</md-radio-button> 
     <md-radio-button ng-value="false">NO</md-radio-button> 
    </md-radio-group> 
    <md-button type="submit">Submit</md-button> 
</form> 

这是CSS：

.formClass.ng-submitted md-radio-group.ng-pristine::after { 
    content: "This is required"; 
    color: red; 
}