Question

我被要求在网页上显示是/否单选按钮。在初始状态下，这两个选项都没有被选中。需要进行验证以确保用户选择其中一个。我能够使用浏览器自己的表单验证来执行此操作，如下所示：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-radio-input-directive-production</title>
  <script src="angular.min.js"></script>  
</head>
<body ng-app="radioExample">
   <script>
   angular.module('radioExample', [])
     .controller('ExampleController', ['$scope', function($scope) {      
       $scope.submitForm = function() {
         alert('valid');
   }       
 }]);
 </script>
 <form name="myForm" ng-submit="submitForm()" ng-controller="ExampleController" novalidate>
   <input name="question" type="radio" ng-model="question" value="yes" required>Yes<br/>
   <input name="question" type="radio" ng-model="question" value="no">No<br/>
   <pre>myForm.question.$error = {{ myForm.question.$error | json }}</pre>
   <div ng-messages="myForm.question.$error" role="alert">
       <div ng-message="required">You did not enter a field</div>
   </div>
   <button type="submit">Submit</button>
</form>
</body>
</html>

我希望能够使用Angular在ng-message中显示验证消息，但我正在努力使其工作：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-radio-input-directive-production</title>  
  <script src="angular.min.js"></script>  
</head>
<body ng-app="radioExample">
   <script>
   angular.module('radioExample', [])
     .controller('ExampleController', ['$scope', function($scope) {       
       $scope.submitForm = function() {
         alert('valid');
       }       
     }]);
 </script>
 <form name="myForm" ng-submit="submitForm()" ng-controller="ExampleController" novalidate>
   <input name="question" type="radio" ng-model="question" value="yes" required>Yes<br/>
   <input name="question" type="radio" ng-model="question" value="no">No<br/>
   <pre>myForm.question.$error = {{ myForm.question.$error | json }}</pre>
   <div ng-messages="myForm.question.$error" role="alert">
       <div ng-message="required">You did not enter a field</div>
   </div>
   <button type="submit">Submit</button>
  </form>
</body>
</html>

我做错了什么？

Answer 1

我不认为“必需”对无线电输入有效。所以这里没有真正指定浏览器/ Angular行为。所以问题是，表格是有效的。这是一个代码片段，其中包含您的要求，但它并不是非常清晰和直接。

angular.module('radioExample', [])
.controller('ExampleController', ['$scope', function($scope) {       
  $scope.submitForm = function() {
    alert('valid');
  }       
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="radioExample">
 <form name="myForm" ng-submit="submitForm()" ng-controller="ExampleController" novalidate>
   <input name="question" type="radio" ng-model="question" value="yes">Yes<br/>
   <input name="question" type="radio" ng-model="question" value="no">No<br/>
   <div ng-if="question!='yes'" role="alert">
       <div>You did not enter a field</div>
   </div>
   <button type="submit">Submit</button>
  </form>
</div>

Answer 2

尝试：

HTML：

protected void AddTextBox(object sender, EventArgs e)
{
    int index = pnlTextBoxes.Controls.OfType<TextBox>().ToList().Count + 1;
    this.CreateTextBox("txtDynamic" + index);
}


private void CreateTextBox(string id)
{
    TextBox txt = new TextBox();
    txt.ID = id;
    pnlTextBoxes.Controls.Add(txt);

    Literal lt = new Literal();
    lt.Text = "<br />";
    pnlTextBoxes.Controls.Add(lt);
}

JS：

<form ng-app="radioExample"  ng-controller="ExampleController" name="myForm"  novalidate ng-submit="submitForm()">
    <input name="question" type="radio" ng-model="question" value="yes" required>Yes<br/>
    <input name="question" type="radio" ng-model="question" value="no">No<br/>
    <pre>myForm.question.$error = {{ myForm.question.$error | json }}</pre>
    <div ng-messages="myForm.question.$error" role="alert">
        <div ng-message="required">You did not enter a field</div>
    </div>

    <input class="btn" type="submit" value="Submit">
</form>

使用Angular验证单选按钮的选择

2 个答案: