简体   繁体   中英

angular remove form validation after form submit

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;

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>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM