0

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

Claies
  • 22,124
  • 4
  • 53
  • 77
izk
  • 1,189
  • 2
  • 8
  • 23
  • Can you try changing the submit button type to `button` and change `ng-submit` to `ng-click` instead? – Icycool Jul 02 '15 at 18:07
  • Hey lcycool -- Thanks. That still does not work on the second submission, and, of course, expressions dependent of $submitted do not work anymore, like showing a preloader, etc. – izk Jul 02 '15 at 18:36
  • @izk Could you create the plunkr of the same? – Pankaj Parkar Jul 03 '15 at 07:28
  • Thanks @PankajParkar, here: http://embed.plnkr.co/zO3lEqa7sfqYDvjHRnqa/preview – izk Jul 06 '15 at 15:26

1 Answers1

1

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

Ricardo Velhote
  • 4,630
  • 1
  • 24
  • 30
  • Damnit! Of course, the submit function was being destroyed when resetting the data. Great catch. Thank you! I have to wait 21 hours to award you the bounty... – izk Jul 07 '15 at 19:28