Question

我正在使用一个小表单只有两个字段。

1.textarea命名消息

2.input type file

我的表单验证在提交按钮上正常工作。但是在提交表单后，所选文件不会变为空白，并且消息字段的验证消息不会隐藏。

我的表格如下： -

<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>

我在控制器中使用以下代码： -

$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;

Answer 1

您可以做的是保留原始对象的副本

var original = $scope.discussion;

然后在重置期间：

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

也可以重置按钮类型

type='reset' in  <button>

表单提交后角度删除表单验证

1 个答案: