表单验证中的错误消息未按预期显示
[英]error message in the form validation is not showing as expected
问题描述
我正在研究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 个解决方案
解决方案1
1 2018-03-20 01:55:20
首先，我为所有复选框值声明了一个数组：
$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{
}
}
就这样！
请检查工作代码段：
<!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 -->
解决方案2
0 已采纳 2018-03-20 01:21:38
解决方案是更新（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）选择复选框时，需要设置错误条件以处理该复选框。
（2）对于用户输入字段，您需要设置ng-model = user，以将$ scope.user对象链接到输入。
（3）对于SubmitForm方法，您想知道selectedColor数组至少具有一项，并且该用户不为空。
作为终点，请使用适当的棉绒和缩进格式设置代码格式。 否则，乍一看很难看。
表单验证未显示错误消息
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.