清除 angularJs 表单答案

【问题标题】：clearing angularJs form清除 angularJs 表单
【发布时间】：2016-02-18 10:04:03
【问题描述】：

我正在使用 AngularJs 1.4 并有一个输入表单。我在表单末尾有一个重置、取消和提交按钮。当我单击时，所有表单元素都必须设置为默认值。但是当我单击reset 按钮时，submitForm 函数也会与resetForm 函数一起被调用。请让我知道我哪里出错了。表单字段也没有被重置。

<form class="form-horizontal" name="myForm" ng-submit="submitForm(myForm.$valid)" novalidate><!-- novalidate prevents HTML5 validation since we will be validating ourselves -->
<div class="form-group" ng-class="{ 'has-error' : myForm.ipaddresses.$invalid && !myForm.ipaddresses.$pristine }">
  <label class="col-sm-3 control-label">IP</label>
  <div class="col-md-6"><textarea name="ipaddresses" class="form-control" ng-model="ipaddresses" ng-minlength="8" ng-requied="!myForm.myFile"></textarea></div>
    <p ng-show="myForm.ipaddresses.$invalid && !myForm.ipaddresses.$pristine" class="help-block">Hostname or IP Addresses are mandatory</p>
  </div>
  <div class="hr-line-dashed"></div>
  <div class="form-group">
    <label class="col-sm-3 control-label">File Upload</label>
    <div class="col-lg-6">
      <div class="upload-file">
        <input type="file" file-model="myFile" class="upload-demo" id="upload-demo" ng-requied="!myForm.ipaddresses">
        <label for="upload-demo" data-title="Select file">
          <span class="ng-binding">Comma separated CSV file...</span>
        </label>
      </div>
    </div>
  </div>
  <div class="hr-line-dashed"></div>
  <div class="form-group"><label class="col-sm-3 control-label">Mode</label>
    <div class="col-md-3">
      <select name="mode" class="form-control m-b" ng-required="true">
        <option>Enable</option>
        <option>Disable</option>
      </select>
    </div>
  </div>
  <div class="hr-line-dashed"></div>
   <div class="form-group" style="margin-top: 8%;">
    <div class="col-sm-4 col-sm-offset-4">
      <button class="btn btn-info">Cancel</button>
      <button class="btn btn-warning" ng-click="resetForm(myForm)">Reset</button>
      <button class="btn btn-primary" type="submit" ng-disabled="myForm.$invalid">Next >></button>
    </div>
  </div>
</form>

在我的控制器中，我有以下代码：

 $scope.submitForm = function(isValid) {
    // check to make sure the form is completely valid
    if (isValid) {
      alert('our form is amazing');
    }
};

 $scope.resetForm=function(myForm){
        console.log('came here....')
        myForm.ipaddresses=null;
    }

【问题讨论】：

标签： angularjs angularjs-forms

【解决方案1】：

只需将myForm.ipaddresses=null; 更改为$scope.ipaddresses='';。

它应该如下所示：

$scope.resetForm=function(myForm){
    console.log('came here....');
    $scope.ipaddresses='';
}

【讨论】：

请访问这个小提琴：jsfiddle.net/n9tL7cdr/8。单击$scope.resetForm 时，IP textArea 将被重置。是否要重置文件上传到和列表框？
当我们在控制器上调用reset函数时，为什么会打印出'out form is Amazing'？
知道了。我使用 myForm.ipaddresses = ' ' 而不是 'scope.ipaddresses=' ''
因为ng-submit="submitForm(myForm.$valid)" 而显示的“我们的表格很棒”。我认为您应该检查您的代码逻辑，以便它根据您的预期输出运行:-)

【解决方案2】：

你可以使用 $setPristine();到表格，作为角度文档 https://docs.angularjs.org/api/ng/type/form.FormController 说

“当我们需要时，将表单设置回原始状态通常很有用在保存或重置表单后“重新使用”表单。”

期待你的帮助

【讨论】：