Question

如何验证md-radio-button是否尚未被选中？我尝试添加div-messages和div-message但它似乎没有用。

<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

使用ng-required我能够达到类似效果。将ng-required="true"添加到md-radio-group，并在提交表单之前进行检查。

＆＃13;

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

＆＃13;

Answer 2

我遇到了这个问题。我有几个md-button-groups是必需的，我需要提醒用户需要选择。添加＆＃34;必需＆＃34;到md-radio-group工作停止提交，ng-required =＆＃34; true＆＃34;，但我无法显示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;
}

Answer 3

您可以在表格中采用以下解决方案，它应该可以正常工作。我在我的应用程序中使用过

检查CodePen上的解决方案（https://codepen.io/jakobadam/pen/xqZoBR）

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

Answer 4

添加一个包裹<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并且您需要针对一行而不是整个表单进行验证。

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

4 个答案: