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; 
}