Angular Material：製作一個md-radio-group

我正在使用Angular Material，我需要製作一個收音機組，以便用戶在提交表單之前必須選擇一個單選按鈕。因此，表單應該是無效的，而沒有單選按鈕被選中。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>

我試圖使需要個體<md-radio-button>，給予name到無線電組和使用ng-messages爲required，但無濟於事。當我檢查鉻元素檢查器中的md-radio-group時，它總是有class="ng-valid ng-valid-required"。

我大概可以檢查parameters.selected屬性以驗證我自己的表單，但是我想如果將正確的類應用於md-radio-group並且表單自動失效。

P.S. ：在Github角度材料上有類似的問題，但它現在似乎已經關閉，這些建議似乎不適用於我。

來源

2016-09-15 gaurav5430

我嘗試NG-殘疾人提供材料的角度它的工作原理（在你的情況下嘗試刪除表單中的應答器 '的novalidate' attribut）

段：

<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

Angular Material：製作一個md-radio-group

回答

相關問題