Question

我有form。发布submit，如果form 无效，则错误会在input字段下方显示出来。

可以使用“取消”按钮隐藏form。

可以使用＆＃39;显示表单＆＃39;再次显示表单。 button。

但是问题：旧的form 错误仍然存在。

如何重置表单而不设置与其关联的ng-model，因为输入字段在加载过程中应为空？

重置，我应该可以从html本身和controller 来完成。

以下代码：

<form novalidate name="form.customForm">
      <div class="form-group">
        <div>
          <label>Name</label>
        </div>
        <div>
          <input type="text" name="name" ng-model="model.name" class="form-control" ng-required="true" />
          <span class="red" ng-show="(form.customForm.name.$touched && form.customForm.name.$error.required) || (form.customForm.name.$error.required &&     form.customForm.$submitted)">Name cannot be empty</span>
        </div>
      </div>

      <div class="form-group">
        <div>
          <label>Age</label>
        </div>
        <div>
          <input type="text" name="age" ng-model="model.age" class="form-control" ng-required="true" />
          <span class="red" ng-show="(form.customForm.age.$touched && form.customForm.age.$error.required) || (form.customForm.age.$error.required &&     form.customForm.$submitted)">Age cannot be empty</span>
        </div>
      </div>

      <button class="btn btn-primary" type="submit" ng-click="submit(form.customForm.$valid);">
        Submit
      </button>
      <button class="btn btn-default" type="button" ng-click="isForm = false;">
        Cancel
      </button>

</form>

参考demo。

Answer 1

我建议你在控制器中编写取消按钮逻辑，你确定要从html本身做吗？你可以使用这些语句来重置表格和字段。

form.customForm.$setPristine();
model = {};
form.customForm.$setUntouched();

The updated jsfiddle

Answer 2

如何将取消按钮类型更改为“重置”？这是最简单的解决方案

<button class="btn btn-default" type="reset" ng-click="isForm = false;">
     Cancel
</button>

Answer 3

点击取消按钮，您可以进行设置 form.customForm.$submitted = false;

这将隐藏错误消息。

您的取消按钮变为：

 <button class="btn btn-default" type="button" 
  ng-click="isForm = false; form.customForm.$submitted = false;">
        Cancel
 </button>

See jsfiddle

Answer 4

给表单命名：

<div ng-controller="BlaController as vm">
  <form name="vm.formOne">
  </form>
</div>

在控制器中执行此操作:(这就是我如何使其工作）

if (vm.formOne) {
  vm.formOne.$setPristine();
  vm.formOne.$setUntouched();
  vm.formOne.$commitViewValue();
}

Answer 5

 $scope.cancel = function(form){
   $scope.isForm = true;
   form.customForm.$submitted=false;
   form.customForm.name.$touched = false;
   form.customForm.age.$touched=false;
  }

 <button class="btn btn-default" type="button" ng-click="cancel(form)" ng-show="!isForm">

Fiddle Demo

或者

<button class="btn btn-default" type="button" ng-click="isForm = true;
   form.customForm.$submitted=false;
   form.customForm.name.$touched = false;
   form.customForm.age.$touched=false;" ng-show="!isForm">

Fiddle Demo

如何在仅从HTML提交的AngularJS中重置表单？

5 个答案: