我有一个带有 2 个输入和 2 个单选按钮的表单。当两个字段均已填写且单选按钮之一被选中时，表单有效。在本例中，我启用提交按钮。问题是即使没有选择单选按钮，提交按钮也会被启用
<form name="formAdd" novalidate ng-submit="sendForm()" class="basic-grey" ng-controller="SignUpController">
<input id="antiForgeryToken" data-ng-model="antiForgeryToken" type="hidden" data-ng-init="antiForgeryToken='@GetAntiForgeryToken()'" />
<div class="bg-danger validationErrors" ng-show="validationErrors">
<ul>
<li ng-repeat="error in validationErrors">{{error}}</li>
</ul>
</div>
<div class="form-group">
<label for="Email">Email</label>
<input name="Email"
type="text"
class="form-control"
placeholder="Enter email"
ng-model="person.Email"
ng-required="true"
ng-minlength="3" />
</div>
<div class="form-group">
<label for="UserName">User name</label>
<input name="UserName"
type="text"
class="form-control"
placeholder="Enter user name"
ng-model="person.UserName"
ng-required="true" />
</div>
<div class="form-group" style="height:30px;">
<label for="Role">Your role</label>
<label data-ng-repeat="choice in question.choices" name="Role">
<input type="radio" name="response" data-ng-model="choice.isUserAnswer" data-ng-value="true" ng-required="true" />
{{choice.text}}
</label>
</div>
<a href="/" class="btn btn-default">Cancel</a>
<button type="submit" ng-disabled="formAdd.$invalid" class="btn btn-primary">Save</button>
</form>
已更新 (添加 Controller )
var app = angular.module('signupvalidation', []);
app.controller('SignUpController', function ($scope, $http) {
$scope.person = {};
$scope.question = {
questionText: "",
choices: [{
id: 1,
text: "I'm an admin",
isUserAnswer: "false"
}, {
id: 2,
text: "I'm an user",
isUserAnswer: "false"
}]
};
$scope.sendForm = function () {
$http({
method: 'POST',
url: 'api/accounts/create',
data: $scope.person,
headers: {
'RequestVerificationToken': $scope.antiForgeryToken
}
}).success(function (data, status, headers, config) {
$scope.message = '';
if (data.success == false) {
var str = '';
for (var error in data.errors) {
str += data.errors[error] + '\n';
}
$scope.message = str;
}
else {
$scope.message = 'Saved Successfully';
$scope.person = {};
}
}).error(function (data, status, headers, config) {
$scope.message = 'Unexpected Error';
});
};
});
最佳答案
请参阅下面的演示
<label for="Role">Your role</label>
<label data-ng-repeat="choice in question.choices" name="Role">
<input type="radio" name="response" data-ng-model="person.userType" data-ng-value="choice.value" ng-required="!person.userType" />
{{choice.text}}
</label>
var app = angular.module('app', []).
controller('HomeCtrl', function($scope) {
$scope.question = {
questionText: "",
choices: [{
id: 1,
text: "I'm an admin",
value: "admin"
}, {
id: 2,
text: "I'm an user",
value: "user"
}]
};
});<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-controller="HomeCtrl">
<form name="formAdd" novalidate ng-submit="sendForm()" class="basic-grey">
<input id="antiForgeryToken" data-ng-model="antiForgeryToken" type="hidden" data-ng-init="antiForgeryToken='@GetAntiForgeryToken()'" />
<div class="bg-danger validationErrors" ng-show="validationErrors">
<ul>
<li ng-repeat="error in validationErrors">{{error}}</li>
</ul>
</div>
<div class="form-group">
<label for="Email">Email</label>
<input name="Email" type="text" class="form-control" placeholder="Enter email" ng-model="person.Email" ng-required="true" ng-minlength="3" />
</div>
<div class="form-group">
<label for="UserName">User name</label>
<input name="UserName" type="text" class="form-control" placeholder="Enter user name" ng-model="person.UserName" ng-required="true" />
</div>
<div class="form-group" style="height:30px;">
<label for="Role">Your role</label>
<label data-ng-repeat="choice in question.choices" name="Role">
<input type="radio" name="response" data-ng-model="question.userType" data-ng-value="choice.value" ng-required="!question.userType" />{{choice.text}}
</label>
</div>
<a href="/" class="btn btn-default">Cancel</a>
<button type="submit" ng-disabled="formAdd.$invalid" class="btn btn-primary">Save</button>
<pre>{{person | json}}
</form>
</body>
</html>关于javascript - 单选按钮选择验证，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33694374/