angular remove form validation after form submit

Question

I am working with a small form just have two fields.

1.textarea named message

2.input type file

My form validation is working fine on submit button. But after submitting form selected file does not get blank and validation message for message field does not hide.

My form is below:-

<div ng-controller="discussCtrl">
  <form name="message_frm" enctype="multipart/form-data" novalidate>
    <div class="control-group" ng-class="{
                                         true : 'error'
                                        } [submitted && message_frm.message.$valid]">
      <div class="col-xs-12 text-left">
        <!--<div class="row">-->
        <input type="file" ng-file-select="onFileSelect($files)" id="file" name='file' model='discussion.attach' value="">
        <span class="fileNotice">Max file size is 1MB, allowed files are .jpeg, .png, .jpg, .gif, .odt, .xls, .doc, .pdf</span>
        <span ng-show="fileError" id="fileError" class="angular-error simplebox">Please provide a valid file</span>

      </div>
      <div class="col-md-12">
        <div class="boxTextarea">
          <textarea class="sendMesTextarea" id="frmMessage" name="message" placeholder="Write your message here......" ng-model="discussion.message" ng-minlength="10" ng-maxlength="500" required></textarea>
          <span class="angular-error" data-ng-if="message_frm.message.$dirty && message_frm.message.$invalid"> </span>
          <span class="angular-error" data-ng-if="(message_frm.message.$dirty || sub) && message_frm.message.$error.required">Message required.</span>
          <span class="angular-error" data-ng-if="(sub && message_frm.message.$error.minlength) || (message_frm.message.$error.minlength)">min length is 10 </span>
          <span class="angular-error" data-ng-if="(sub && message_frm.message.$error.maxlength) || (message_frm.message.$error.maxlength)">min length is 500 </span>
          <div class="buttonsRow">
            <button type="submit" data-toggle="tooltip" class="greenBtn" ng-click="sub = 1; submitDiscussionData('{{node.id}}')" ng-init="button = 'Send'">{{button}}</button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

and I am using below code in the controller:-

$scope.discussion.messages = '';// This blanks message field
$scope.discussion.attach = '';////Does not blank file
$scope.button = 'Send';
$scope.discussion = '';  //Try to blank model                 
$scope.message_frm.$setPristine();//Does not works
$scope.message_frm.$setValidity();//Does not works
return;

harishr · Accepted Answer · 2015-09-24 13:13:43Z

1

what you can do is keep the copy of original object

var original = $scope.discussion;

and then during reset :

$scope.discussion = angular.copy(original)
$scope.message_frm.$setPristine()

also make the button type reset

type='reset' in  <button>

answered Sep 24, 2015 at 13:13

harishr

18.1k9 gold badges84 silver badges131 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Deepak Dholiyan Over a year ago

Hi entre, Thanks for your answer. I have found the solution for message field, I just set the sub=0 after form submit but I am facing problem with input file type. This is not getting blank

Deepak Dholiyan Over a year ago

I can use javascript here, but Do not want. Any answer will be appreciable

harishr Over a year ago

its by a good design that the ng-model does not get reset by $setPristine. you will have to manually do it.. not sure how can you do that without using javascript

Deepak Dholiyan Over a year ago

$scope.discussion.messages = ''; $scope.discussion = ''; $scope.sub = 0; document.getElementById("file").value = ""; $scope.message_frm.$setPristine(); Above code works fine, Can anyone tell me how can I reset the file in angular method.

Collectives™ on Stack Overflow

angular remove form validation after form submit

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related