表单验证中的错误消息未按预期显示

时间:2018-03-20 01:18:01

标签: javascript angularjs twitter-bootstrap

我正在研究angularjs和bootstrap应用程序。我试图验证简单表单,当用户点击提交按钮时,from中的所有字段都应该有一个值。

请查看演示:https://plnkr.co/edit/aHtODbTTFZfpIRO3BWhf?p=preview 在上面的演示中,当用户点击提交按钮而不选择复选框时,会显示错误消息并且“请选择颜色...”。 ,显示错误消息后,选中复选框并单击提交按钮,仍然显示错误消息。对此有任何意见吗?

html代码:

<form name="myForm" ng-controller="ExampleController">
   <div>Select Color : </div>
      <label name="color" ng-repeat="color in colorNames" class="checkbox-inline">
<input ng-required="selectedColor.length === 0" oninvalid="this.setCustomValidity('Please select the color..')" type="checkbox" name="color" value="{{color}}" ng-checked="selectedColor.indexOf(color) > -1" ng-click="userSelection(color)">                        <!--<input type="checkbox" name="color" value="{{color}}" ng-checked="selectedColor.indexOf(color) > -1" ng-click="userSelection(color)"> {{color}}-->
     {{color}}       <br>       </label>

            <div class="">
                <div style="color: black;">Username : </div>
               <input type="text" name="user" value="" required>
                <div ng-show="myForm.$submitted || myForm.user.$touched">
                    <p class="error-mesg" ng-show="myForm.user.$error.required">The Username is required</p>
                </div>
            </div>            
             <button type="submit" class="btn btn-primary" ng-click="submitForm(myForm)">Submit</button>
 </form>

2 个答案:

答案 0 :(得分:1)

<强>第一 我已为所有复选框值声明了一个数组:

$scope.selectedColor = [false,false,false];

<强>第二 我添加了一个复选框验证检查方法:

$scope.someSelected = function () {
           for(var i = 0; i < $scope.selectedColor.length; i++) {
             if($scope.selectedColor[i]) return true;
           }

           return false;
};

<强>第三 我使用ng-model并更新HTML代码,ng-model用于双向数据绑定,更改为绑定值将反映在视图和控制器中:

<input ng-required="!someSelected()" ng-model = "selectedColor[$index]"  type="checkbox" name="color" value="{{color}}">

<强>第四 用户输入框也没有ng-model,因此视图中的更改不会在控制器中更新。要解决此问题,请添加ng-model

<input type="text" ng-model = "user" name ="user" value="" required>

<强>第五 更新了提交表单验证:

$scope.submitForm = function(){
             if ($scope.someSelected() && $scope.user != "" && $scope.user != undefined) {
          alert("all fields are entered");
            }else{

            }
        }

多数民众赞成!

请检查工作代码段:

&#13;
&#13;
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-checkbox-input-directive-production</title>
  

  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
  

  
</head>
<body ng-app="checkboxExample"> 
  <script>  
  angular.module('checkboxExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
       
      $scope.colorNames = ['RED', 'BLUE', 'BLACK'];
        $scope.selectedColor = [false,false,false];
        $scope.userSelection = function userSelection(team) {
            var idx = $scope.selectedColor.indexOf(team);   
           if (idx > -1) { 
                $scope.selectedColor.splice(idx, 1);
            } 
            else {
                $scope.selectedColor.push(team);
            }
        };
        $scope.submitForm = function(){
             if ($scope.someSelected() && $scope.user != "" && $scope.user != undefined) {
          alert("all fields are entered");
            }else{
               
            }
        } 
        $scope.someSelected = function () {
           for(var i = 0; i < $scope.selectedColor.length; i++) {
             if($scope.selectedColor[i]) return true;
           }
           
           return false;
        };
        
    
    }]);
</script>
<form name="myForm" ng-controller="ExampleController">
   <div>Select Color : </div>
      <label name="color" ng-repeat="color in colorNames" class="checkbox-inline">
<input ng-required="!someSelected()" ng-model = "selectedColor[$index]"  type="checkbox" name="color" value="{{color}}">                        <!--<input type="checkbox" name="color" value="{{color}}" ng-checked="selectedColor.indexOf(color) > -1" ng-click="userSelection(color)"> {{color}}-->
     {{color}}       <br>       </label>
                
            <div class="">
                <div style="color: black;">Username : </div>
               <input type="text" ng-model = "user" name ="user" value="" required>
                <div ng-show="myForm.$submitted || myForm.user.$touched">
                    <p class="error-mesg" ng-show="myForm.user.$error.required">The Username is required</p>
                </div>
            </div>
            
             <button type="submit" class="btn btn-primary" ng-click="submitForm(myForm)">Submit</button>

   

 </form>
</body>
</html>

<!-- 
Copyright 2018 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->
&#13;
&#13;
&#13;

答案 1 :(得分:0)

解决方法是更新(1)颜色输入字段,(2)用户输入字段和(3)submitForm方法

<input ng-required="selectedColor.length === 0" onchange="this.setCustomValidity(!validity.valueMissing && '')" oninvalid="this.setCustomValidity(validity.valueMissing ? 'Please select the color..' : '')"type="checkbox" name="color" value="{{color}}" ng-checked="selectedColor.indexOf(color) > -1" ng-click="userSelection(color)">

<input type="text" name="user" value="" ng-model="user" required>

$scope.submitForm = function(form){
  if ($scope.selectedColor.length > 0  && $scope.user != "") {
    console.log('fields are all entered');
  } else{

  }
} 

(1)您需要设置false条件以在选中时处理复选框。

(2)对于您的用户输入字段,您需要设置ng-model = user以将$ scope.user对象链接到输入。

(3)对于submitForm方法,您想知道selectedColor数组至少有一个项目,并且该用户不是空的。

作为结束点,请使用适当的linting和缩进格式化代码。否则,乍一看很难读。