角材：テーブルの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-input-container>にあなたの<md-radio-group>を包みます。あなたのコードは、これと同じになります：

<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があり、全体ではなく、フォームの1行に対して検証する必要があるために必要とされます。

Answer 2

私は、ng-requiredを使って同様に達成することができました。 をmd-radio-groupに追加し、フォームを送信する前に確認してください。

<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-button-groupが必要ですが、選択が必要であることをユーザーに警告する必要があります。 nd-required = "true"と同様に、md-radio-groupに "required"を追加すると送信を停止できますが、ng-messagesを表示できませんでした。 Angular Materialチームは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; 
}