Angular中提交按钮调用$setPristine无法重置表单问题咨询

嘿，这个问题我太熟悉了！根源就在于submit按钮自带的浏览器默认提交行为在捣乱。

当你点击type="submit"的按钮时，浏览器会自动触发表单的默认提交流程——不管你有没有配置后端接口，它都会尝试把表单数据发送出去，这会导致页面刷新（单页应用里可能触发路由跳转或者Angular上下文重置）。而你在vm.submit里调用的form.$setPristine()是在当前页面的Angular环境中执行的，默认提交动作会直接打断这个过程，导致重置代码还没生效就被覆盖了。

但type="button"的按钮就没这个问题——它不会触发任何浏览器默认行为，所以form.$setPristine()能顺顺利利执行，表单状态也能正常重置。

有两种靠谱的办法，选哪种都可以：

办法1：手动阻止默认提交行为 #

修改你的按钮点击事件，把$event传进去，然后调用preventDefault()叫停浏览器的默认动作：

<button class="button" type="submit" ng-click="vm.submit(testForm, $event)"> Volgende vraag </button>

然后更新你的JS方法：

vm.submit = function(form, $event) {
  // 先按住浏览器的默认提交行为
  $event.preventDefault();
  
  if (!form.$invalid) {
    vm.showQuestion(vm.indexOfQuestion);
    vm.putAnswer();
    // 现在重置表单状态就没问题了
    form.$setPristine();
    // 要是还想把表单的"触摸状态"也重置（比如输入框的高亮提示），可以加这个
    form.$setUntouched();
  }
}

办法2：用Angular的ng-submit指令（更推荐） #

这是Angular表单设计的最佳实践——把提交逻辑绑定到<form>标签的ng-submit上，而不是按钮的ng-click：

<form name="testForm" ng-submit="vm.submit(testForm)">
  <!-- 你的表单输入项都放这里 -->
  <button class="button" type="submit"> Volgende vraag </button>
</form>

对应的JS方法不用额外处理默认行为，因为ng-submit会自动帮你阻止浏览器的默认提交动作：

vm.submit = function(form) {
  if (!form.$invalid) {
    vm.showQuestion(vm.indexOfQuestion);
    vm.putAnswer();
    form.$setPristine();
    form.$setUntouched();
  }
}

这种方式更贴合Angular的设计思路，也少写了手动处理事件的代码，更干净。

要是你不仅想重置表单的状态（pristine），还想把输入框里的内容也恢复到初始值，可以提前备份一份初始数据，提交后再恢复：

// 页面初始化时备份表单绑定的对象
vm.originalFormData = angular.copy(vm.yourFormData);

vm.submit = function(form) {
  // 用办法1的话记得加$event.preventDefault()
  if (!form.$invalid) {
    // ...你的业务逻辑
    form.$setPristine();
    form.$setUntouched();
    // 把表单值恢复到初始状态
    vm.yourFormData = angular.copy(vm.originalFormData);
  }
}

内容的提问来源于stack exchange，提问作者J. Doe