我有一个指令根据它们的 $valid
和 $untouched
属性验证表单内的输入——如果输入被“触摸”,它会检查验证和颜色相应地,红色/绿色的字体和边框,如果输入没有被“触摸”,它不会做任何事情。
我正在使用 ngBootBox 的自定义对话框,所以我没有 type="submit"
那种提交表单的按钮,我正在使用“创建”按钮的回调函数为了传递/保存数据。
我的问题是,当我点击“创建”按钮时,表单不是“有效的”,因为一些字段是空的——我的输入仍然是“未触及的”,所以 $watch
函数没有被调用。
任何解决方案?有没有办法做这样的事情:
$scope.createProjectForm.$setTouched(true);
这将使该表单的所有子输入都获得该值?
我也试过了,没用:
angular.forEach($scope.createProjectForm, function(field){
field.$setTouched(true);
});
这是我的验证指令:
angular.module('mean.theme').directive("inputValidation", function () {
return {
restrict: 'EA',
require: 'ngModel',
link: function (scope, inputElement, attrs, ngModelCtrl) {
var $icon = $('<i class="fa"></i>');
inputElement.before($icon);
scope.$watchGroup([
function(){
return ngModelCtrl.$untouched;
},
function(){
return ngModelCtrl.$valid;
}
], function(Paramaters){
console.log(scope);
if(!Paramaters[0]) {
if (Paramaters[1]) {
inputElement.switchClass('validation-warning-border','validation-success-border',50)
inputElement.prev().switchClass('fa-warning validation-warning-font' , 'fa-check validation-success-font',50);
} else {
inputElement.switchClass('validation-success-border','validation-warning-border',50)
inputElement.prev().switchClass('fa-check validation-success-font','fa-warning validation-warning-font',50)
}
}
});
}
};
});
这是我的 Controller 代码的一部分:
$scope.create = function () {
var options = {
title: 'Create',
templateUrl: 'project.html',
scope: $scope,
buttons: {
warning: {
label: "Cancel",
className: "btn-link",
callback: function () {
}
},
success: {
label: "Create",
className: "green",
callback: function () {
if ($scope.createProjectForm.$valid){
$scope.createProject(template);
} else {
$scope.project.createButtonClicked = true;
return false;
}
}
}
}
};
$ngBootbox.customDialog(options);
};
这是我的 HTML 代码的一部分:
<form role="form" name="createProjectForm">
<label>
Name Your Project
</label>
<div>
<input type="text" name="project.name"
ng-model="project.name" required="required" class="form control" input-validation/>
</div>
<label>
Name Your Project
</label>
<div>
<input type="text" name="project.title"
ng-model="project.title" required="required" class="form control" input-validation/>
</div>
</form>
- 编辑:
我找到了我需要的,更简单、更快捷的方法:
可以手动设置:
$scope.createProjectForm.$setSubmitted()
为 true
然后让 children(inputs) $watch
也为此更改:
scope.$watchGroup([
function(){
return ngModelCtrl.$untouched;
},
function(){
return ngModelCtrl.$valid;
},
function(){
return ngModelCtrl.$$parentForm.$submitted;
}
], function(Paramaters){
// code here
}
最佳答案
您可以遵循与此类似的格式:
if ($scope.form.$invalid) {
angular.forEach($scope.form.$error, function (field) {
angular.forEach(field, function(errorField){
errorField.$setTouched();
});
});
}
参见“$setTouched”:https://docs.angularjs.org/api/ng/type/ngModel.NgModelController
关于javascript - 如何在没有提交按钮的情况下将所有输入设置为 $touched AngularJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34164122/