角度のある素材：md-radio-groupが必要です

私はAngular Materialを使用していますので、フォームを送信する前にラジオボタンを選択する必要があります。ラジオボタンが選択されていないときは、フォームが無効である必要があります。角度のある素材：md-radio-groupが必要です

これはコード

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

ある私は、無線グループにnameを与え、requiredため、しかし無駄にng-messagesを使用して、個々<md-radio-button>が必要作る試みました。クロム要素インスペクタのmd-radio-groupを確認すると、常にclass="ng-valid ng-valid-required"が表示されます。

parameters.selected私自身がフォームを検証するためのプロパティをチェックしている可能性がありますが、正しいクラスがmd-radio-groupに適用されていて、フォームが自動的に無効になっていると思います。

P.S. ：Angular Material Githubにも同様の問題がありますが、今は閉じられているようで、提案は私にとってはうまくいかないようです。

出典

2016-09-15 gaurav5430

私は

スニペット（お使いの場合には、フォーム地上子で 'NOVALIDATE' attributを削除しようとする）それが動作材料の角度でのNG-無効になってみてください：

<html lang="en"> 
 

 
<head> 
 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script> 
 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 
    <script language="javascript"> 
 
     angular 
 
      .module('firstApplication', ['ngAnimate', 'ngAria', 'ngMaterial', 'ngMessages']) 
 
      .controller('myController', function($scope) { 
 
       $scope.statuses = ['Planned', 'Confirmed', 'Cancelled']; 
 
       $scope.options = ['Option 1', 'Option 2', 'Option 3', 'Option 4', '...']; 
 
       $scope.submit = function(obj) { 
 
        // submit code goes here 
 
        console.log(obj); 
 
       }; 
 
       $scope.reset = function() { 
 
        $scope.obj = { 
 
         name: "", 
 
         myselect: "", 
 
         status: "" 
 
        } 
 
       } 
 
       $scope.reset(); 
 
      }); 
 
    </script> 
 
</head> 
 

 
<body ng-app="firstApplication"> 
 

 
    <form name="myForm" ng-app="myApp" ng-controller="myController" class="container-fluid" ng-submit="submit(obj)"> 
 
     <div class="row"> 
 
      <div class="col-xs-8"> 
 
       <md-input-container> 
 
        <label>Name</label> 
 
        <input name="name" id="name" ng-model="obj.name" ng-required="true"> 
 
        <div ng-messages="myForm.name.$error"> 
 
         <div ng-message="required">Campaign Name is required.</div> 
 
        </div> 
 
       </md-input-container> 
 
      </div> 
 
      <div class="col-xs-8"> 
 
       <md-input-container> 
 
        <md-select name="myselect" id="myselect" placeholder="myselect" ng-model="obj.myselect" ng-required="true"> 
 
         <md-option ng-repeat="o in options" ng-value="o">{{o}}</md-option> 
 
        </md-select> 
 
        <div ng-messages="myForm.myselect.$error"> 
 
         <div ng-message="required">myselect is required.</div> 
 
        </div> 
 
       </md-input-container> 
 
      </div> 
 
      <div class="col-xs-8"> 
 
       <md-input-container> 
 
        <md-radio-group name="status" id="status" ng-model="obj.status" ng-required="true" class=""> 
 
         <md-radio-button ng-repeat="s in statuses" ng-value="s">{{s}}</md-radio-button> 
 
        </md-radio-group> 
 
        <div ng-messages="myForm.status.$error"> 
 
         <div ng-message="required">myselect is required.</div> 
 
        </div> 
 
       </md-input-container> 
 
      </div> 
 
     </div> 
 
     <md-button type="button" ng-click="reset()">RESET</md-button> 
 
     <md-button class="md-primary" type="submit" ng-disabled="myForm.$invalid">SUBMIT</md-button> 
 
    </form> 
 
</body> 
 

 
</html>

出典

2016-09-15 11:19:40

角度のある素材：md-radio-groupが必要です

答えて

関連する問題