Question

我知道有一些相关主题的旧问题，但我没有找到一个令人满意的答案，而且这些答案似乎适用于较早版本的Angularjs。

我的问题是一个带有角度验证的表单，即使在重置模型数据之后，ng-submit也不会在提交一次后触发，并且表单未被触及并设置为pristine。

首次提交后，表单会按预期进行可视化重置，并在第二次使用时正确验证，包括在验证通过时激活提交按钮。在任何提交之前和重置之后比较表单代码会产生相同的HTML。单击提交将按照设计启动预加载器。但是，ng-submit操作不会触发......

    $scope.resetMediaForm = function() {

        $scope.uploadMedia = {};
        $scope.uploadMedia.from = ''
        $scope.uploadMedia.message = ''
        $scope.uploadMedia.file = null;
        $scope.uploadMedia.fileType = '';
        $scope.uploadMedia.fileName = '';
        $scope.uploadMedia.done = false;
        $scope.uploadMedia.error = '';

        if ($scope.mediaForm) {
            $scope.mediaForm.$setUntouched();
            $scope.mediaForm.$setPristine();
            //$('form[name="'+$scope.mediaForm.$name+'"]')[0].reset();
        }

    };

    $scope.resetMediaForm();

    $scope.uploadMedia.submit = function() {

        var data = {
                from: $scope.uploadMedia.from,
                message: $scope.uploadMedia.message,
                file: $scope.uploadMedia.file,
                fileType: $scope.uploadMedia.fileType,
                fileName: $scope.uploadMedia.fileName
            };

        plotRemoteAPI.postMedia(data, function (data, status) {
            if (status >= 200 && status < 300) {
                if (data.success === true) {
                    $scope.resetMediaForm();
                } else {
                    $scope.uploadMedia.error = data.error;
                }   
            } else {
                $scope.uploadMedia.error = status;
            }
        }, function (data, status) {
            $scope.uploadMedia.error = data.error;
        });
    };

Plunkr：http://embed.plnkr.co/zO3lEqa7sfqYDvjHRnqa/preview

Answer 1

您在提交处理程序中调用$scope.resetMediaData();，它会销毁$scope.uploadMedia对象，包括您的提交函数（并且不会重新声明）。我刚刚将$scope.uploadMedia = {};移到resetMediaData()函数之外。

http://plnkr.co/edit/OhRwsfnx3rX3gXZ2bilc?p=preview

AngularJS 1.4.1 ng-submit在表单重置后未提交

1 个答案: