gau*_*430 5 javascript angularjs angular-material
我正在使用 Angular Material，我需要制作一个所需的单选组，以便用户在提交表单之前必须选择一个单选按钮。所以当没有选择单选按钮时，表单应该是无效的。
这是代码
<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-messagesfor required，但无济于事。当我检查md-radio-groupchrome 元素检查器时，它总是有class="ng-valid ng-valid-required".
我可能可以parameters.selected自己检查用于验证表单的属性，但我想如果将正确的类应用于md-radio-group并且因此表单自动无效。
PS：Angular Material Github 上有一个类似的问题，但它现在似乎已经关闭，而且这些建议似乎对我不起作用。
小智 -1
我尝试使用材料角度禁用 ng-disabled 它可以工作（在您的情况下尝试删除表单应答器中的“novalidate”属性）
片段：
<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>| 归档时间： |
|
| 查看次数： |
7744 次 |
| 最近记录： |