javascript - Angular $setPristine() 不工作

Question

我正在尝试使用 Angular 的内置表单函数，特别是 setPristine() 来清除用户提交的表单。我的 Controller 可以访问 $scope.newForm(我的表单)及其所有方法，但运行 $scope.newForm.$setPristine() 不会重置表单字段。

这是我的 HTML:

<div ng-controller="NewFormController">
    <h3>New Entry</h3>

    <form name="newForm" method="post" novalidate>
        <div class="input-group">
            <label>Name</label>
            <input name="name" type="text" ng-model="place.name"/>
        </div>
        <div class="input-group">
            <label>Description</label>
           <textarea name="description" type="text" ng-model="place.description"></textarea>
        </div>
        <div class="input-group">
           <label>Neighborhood</label>
           <input name="neighborhood" type="text" ng-model="place.neighborhood"/>
        </div>
        <div class="input-group">    
            <label>Address</label> 
           <input name="location" type="text" ng-model="place.address"/>
        </div>
        <input type="submit" value="Submit" ng-click="submit(place)"/>
    </form>
</div>

这是我调用 setPristine() 的 Controller :

app.controller('NewFormController', function($scope, $compile) {

    $scope.place = { 
        name: 'ExamplePlace', 
        description: 'This is a description!', 
        neighborhood: 'Manhattan', 
        address: '112 Street Place' 
    };

    $scope.submit = function(place) {
        $scope.newForm.$setPristine();
        $scope.newForm.$setUntouched();
    };

});

Here is a working codepen重现了我的问题。

注意:我使用的是 Angular 版本 1.4.3。

Answer 1

$setPristine 仅将表单标记为 $pristine，这对验证驱动的表达式和 CSS 很有用(例如 .ng-dirty)

因此，$setPristine 不会清除表单的控件。事实上，它甚至不知道如何去做。考虑一下，“清除”对于不同的模型可能意味着不同的事情。 “Clear”可能表示 “”、undefined、null，或者任何与 一起使用的自定义输入控件ngModel 可能意味着。

因此，要正确清除表单，就是修改驱动表单的 View 模型，以达到它需要的任何“清除”定义。在大多数情况下——包括你的——这只是将 View 模型设置为一个新对象的问题:

$scope.submit = function(place) {
   $scope.newForm.$setPristine();
   $scope.newForm.$setUntouched();

   // clear the form
   $scope.place = {};
};