Javascript 如何在没有提交按钮AngularJS的情况下将所有输入设置为$toucted

我有一个指令，它根据表单中的$valid和$untouched属性来验证表单中的输入-如果触摸了输入，它将检查是否有效，并相应地将字体和边框涂成红色/绿色，如果没有触摸输入，它将不会做任何事情

我使用的是ngBootBox的自定义对话框，因此我没有用于提交表单的type=submit按钮，我使用Create按钮的回调函数来传递/保存数据

我的问题是，当我单击“创建”按钮时，表单无效，因为一些字段是空的-我的输入仍然未被触及，因此$watch函数没有被调用。 有什么解决办法吗？有没有办法做到这一点： $scope.createProjectForm.$setTouchedtrue；这将使该表单的所有子输入都获得该值

我也试过了，但没有成功：

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)
                    }
                }
            });
        }
    };
});

这是我的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>

---

您可以采用类似以下的格式：

if ($scope.form.$invalid) {
    angular.forEach($scope.form.$error, function (field) {
        angular.forEach(field, function(errorField){
            errorField.$setTouched();
        });
    });
}

---

请参阅“$setTouched”：

您可以遵循类似以下格式：

if ($scope.form.$invalid) {
    angular.forEach($scope.form.$error, function (field) {
        angular.forEach(field, function(errorField){
            errorField.$setTouched();
        });
    });
}

有关嵌套表单，请参见“$setTouched”：

：

function setFormTouched(form) {
        // Check if the form/property has the $setSubmitted method
        if (form.hasOwnProperty('$submitted')) {
            // Iterate through each of the required error properties
            angular.forEach(form.$error, function (errorType) {
                // Iterate through each error type
                angular.forEach(errorType, function (prop) {
                    // Check if the property has the $setTouched method
                    if (prop.hasOwnProperty('$touched')) prop.$setTouched();
                    // Recursive call to handle nested forms
                    setFormTouched(prop);
                });

            });
        }
    }

解决方案是基于Patrick Marabeas的，但我必须编辑原始代码，因为hasOwnProperty不适用于原型中定义的函数。 例如：

if(prop.hasOwnProperty('$setTouched'))

总是返回false

编辑： 我最初需要的是一种让用户更容易在嵌套选项卡中查找错误的方法。这是用于禁用/启用提交按钮和错误消息的最终工作范围功能：

$scope.isFormValid = function (topLevelForm) {
        if (topLevelForm.$valid) {
            return true;
        }

        // Form not valid, triggering fields to make it easier to find errors
        setFormTouched(topLevelForm);

        function setFormTouched(form) {
            // Check if the form/property has the $setSubmitted method
            if (form.hasOwnProperty('$submitted')) {
                // Iterate through each of the required error properties
                angular.forEach(form.$error, function (errorType) {
                    // Iterate through each error type
                    angular.forEach(errorType, function (prop) {
                        // Check if the property has the $setTouched method
                        if (prop.hasOwnProperty('$touched')) prop.$setTouched();
                        // Recursive call to handle nested forms
                        setFormTouched(prop);
                    });

                });
            }
        }
        return false;
    };

对于嵌套表单：

function setFormTouched(form) {
        // Check if the form/property has the $setSubmitted method
        if (form.hasOwnProperty('$submitted')) {
            // Iterate through each of the required error properties
            angular.forEach(form.$error, function (errorType) {
                // Iterate through each error type
                angular.forEach(errorType, function (prop) {
                    // Check if the property has the $setTouched method
                    if (prop.hasOwnProperty('$touched')) prop.$setTouched();
                    // Recursive call to handle nested forms
                    setFormTouched(prop);
                });

            });
        }
    }

解决方案是基于Patrick Marabeas的，但我必须编辑原始代码，因为hasOwnProperty不适用于原型中定义的函数。 例如：

if(prop.hasOwnProperty('$setTouched'))

总是返回false

编辑： 我最初需要的是一种让用户更容易在嵌套选项卡中查找错误的方法。这是用于禁用/启用提交按钮和错误消息的最终工作范围功能：

$scope.isFormValid = function (topLevelForm) {
        if (topLevelForm.$valid) {
            return true;
        }

        // Form not valid, triggering fields to make it easier to find errors
        setFormTouched(topLevelForm);

        function setFormTouched(form) {
            // Check if the form/property has the $setSubmitted method
            if (form.hasOwnProperty('$submitted')) {
                // Iterate through each of the required error properties
                angular.forEach(form.$error, function (errorType) {
                    // Iterate through each error type
                    angular.forEach(errorType, function (prop) {
                        // Check if the property has the $setTouched method
                        if (prop.hasOwnProperty('$touched')) prop.$setTouched();
                        // Recursive call to handle nested forms
                        setFormTouched(prop);
                    });

                });
            }
        }
        return false;
    };

---

您是否尝试过：$setTouched不带“true”？您是否尝试过：$setTouched不带“true”？它起作用了。谢谢顺便问一下，有没有一种方法可以不使用angular forEach函数迭代每个输入？有没有办法使用我现有的$watch函数来实现这一点？比如说，当点击按钮时——设置我表单的一个参数——让输入$watch函数观察变化？有没有类似的东西，更少的代码和更少的迭代？注意嵌套的ng表单项。谢谢顺便问一下，有没有一种方法可以不使用angular forEach函数迭代每个输入？有没有办法使用我现有的$watch函数来实现这一点？比如说，当点击按钮时——设置我表单的一个参数——让输入$watch函数观察变化？有没有类似的东西，代码更少，迭代更少？注意嵌套的ng表单项