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

【问题标题】：error message in the form validation is not showing as expected表单验证中的错误消息未按预期显示
【发布时间】：2018-03-20 01:18:01
【问题描述】：

我正在开发 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>

【问题讨论】：

标签： javascript angularjs twitter-bootstrap

【解决方案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{

            }
        }

就是这样！

请检查工作代码sn-p：

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

【讨论】：

@codemax - 我们给出的自定义错误消息 oninvalid="this.setCustomValidity(selectedColor.length == 0 ? '请选择颜色..' 没有显示，而是显示；如果您想继续，请选中此框。如何显示消息“请选择颜色..”

【解决方案2】：

解决方案是更新您的 (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数组中至少有一项，并且那个user不为空。

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

【讨论】：

它也不适用于您建议的代码。在未选中复选框的情况下单击提交按钮时，会显示一条错误消息，然后选择复选框，但仍会显示错误消息。请找到更新后的演示plnkr.co/edit/PdWXgpKrb0iLXdkjMFGd?p=preview。
更新我的答案
我还有一个问题，请找到链接plnkr.co/edit/c4GSKvifX9JddC4TcfJQ?p=preview。当用户在未选中复选框的情况下单击提交按钮，然后当用户选中复选框时，除非用户单击其他位置，否则错误消息不会消失。如果我们为文本框
提供自定义消息，那么显示错误消息而不是气球会很棒
@dexter 我做了最后的编辑。应该按预期工作。
我仍然发现您的回答有问题。请找到更新后的演示 plnkr.co/edit/jddf33mF2qanzaidLteB?p=preview 。当用户单击提交时，它会显示一条错误消息“请选择颜色”，当用户单击提交按钮时再次选择颜色后，它不会在第二次单击提交按钮后立即显示文本框的错误消息，仅显示.有输入吗？