angularjsangularjs-directiveng-submit

AngularJS 1.4.1 ng-submit not firing after form reset


I know there are a few older questions with related topics, but I have not found a satisfactory answer to this, plus those answers seem to be for older versions of Angularjs.

My issue is a form with angular validation and ng-submit does not fire after it has been submitted once, even after the model data has been reset, and the form has been untouched and set to pristine.

After the first submission, the form resets visually as expected and validates properly if used a second time, including activating the submit button when validation passes. Comparing the form code before any submissions and after reset produces identical HTML. Clicking submit brings up the preloader as designed. However the ng-submit action won't fire...

    $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


Solution

  • You are calling $scope.resetMediaData(); in your submit handler which destroys the $scope.uploadMedia object including your submit function (and it doesn't get redeclared). I just moved $scope.uploadMedia = {}; outside the resetMediaData() function.

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