AngularJS 表单变得原始但仍然提交答案

【问题标题】：AngularJS form gets pristine but still submittedAngularJS 表单变得原始但仍然提交
【发布时间】：2015-04-09 22:00:44
【问题描述】：

根据AngularJS（1.3.15）的来源，FormController的方法$setPristine()将表单$submitted状态重置为false：

  form.$setPristine = function() {
    $animate.setClass(element, PRISTINE_CLASS, DIRTY_CLASS + ' ' + SUBMITTED_CLASS);
    form.$dirty = false;
    form.$pristine = true;
    form.$submitted = false;
    forEach(controls, function(control) {
      control.$setPristine();
    });
  };

问题是提交和calling this method inside a controller后，表单恢复为$submitted = false。这是预期的还是错误？

【问题讨论】：

我相信与您的关注有关-github.com/angular/angular.js/pull/8056

标签： angularjs forms validation

【解决方案1】：

您看到此行为的原因是重置按钮没有 type="button" 或 type="reset" 属性，因此默认情况下它表现为提交按钮。因此，将表单设置为原始状态的 ng-click 实际上将 $submitted 正确设置为 false，但紧接着，表单再次提交。

app.js

var app = angular.module('plunker', []);

app.controller('MainCtrl', function() {
this.data = {
name: ''
};

this.reset = function(form) {
this.data.name = '';
form.$setPristine();
};

});

HTML 页面：

<html ng-app="plunker">

<head>
<title>form.$submitted</title>
<script src="http://code.angularjs.org/1.3.2/angular.min.js"></script>
<script src="app.js"></script>
</head>

<body>
<div ng-controller="MainCtrl as ctrl">
 <form name="form" novalidate>
  <input name="name" ng-model="ctrl.data.name" placeholder="Name" required   />
  <input type="submit" />
  <button type="button" class="button" ng-click="ctrl.reset(form)">Reset</button>
</form>

<pre>

 Pristine: {{form.$pristine}}

 Submitted: {{form.$submitted}}

</pre>
</div>

http://plnkr.co/edit/kRxEVu?p=preview

希望这是你想要的

来源：https://github.com/angular/angular.js/issues/10006#issuecomment-62640975

【讨论】：

确实，<button type=submit>（这是按钮的默认类型）或<input type=submit> 将在click 事件之后触发submit 事件。 AngularJS 通过将 form.$submitted 设置为 true 来处理 submit 事件，恢复控制器内部的操作。
使用button[type=submit] 和form[ng-submit="form.$valid && submit()"] 语法也很烦人

【解决方案2】：

您可以在提交表单后通过在表单名称中添加 $setUntouched() 和 $setPristine() 来重置表单，或者在您的 Ajax 请求成功时。例如：-

<form name="userDetailsForm"
      ng-submit="addUserDetails(userDetailsForm.$valid)"
      novalidate>

   <div class="field name-field">
      <input class="input" type="text" name="name" ng-model="form.data.name" required placeholder="First Name + Last Name" />
      <div ng-if="userDetailsForm.$submitted || userDetailsForm.name.$touched" ng-messages="signupForm.name.$error">
         <div ng-message="required">You did not enter your name</div>        
      </div>
   </div>

   <input type="submit" value="Add Details" class="btn btn-default" />

</form>


$scope.addUserDetails = function(valid) {
    if(!valid) return;

    //Your Ajax Request

    $scope.userDetailsForm.$setUntouched();                         
    $scope.userDetailsForm.$setPristine();
};

【讨论】：

我不知道使用$setUntouched() 会自动将所有输入字段设置为$untouched 并删除所有ng-touched 类。好资料！谢谢！