Question

我有一个带有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>

更新（添加控制器）

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';
        });
    };
});

Answer 1

请参阅下面的演示

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

Radiobutton选择验证

1 个答案: