AngularJs清空表单并从输入中删除无效状态

Question

我正在使用表单将元素添加到表单一侧显示的列表中.标记是:

  <form name="thingForm">
      <input required type="text" ng-model="thing.name"/>
      <input required type="text" ng-model="thing.value"/>
      <input type="submit" ng-click="addThing(thing)"/>
    </form>
    <ul>
      <li ng-repeat="thing in things">{{thing.name}} with value of {{thing.value}}</li>
    </ul>

在控制器中我有:

$scope.things = [];
$scope.addThing = function(thing) {
    $scope.things.push(thing);
    $scope.thing = {};
};

工作jsfiddle:http://jsfiddle.net/cXU2H/1/

现在您可以看到,我可以通过清空模型来清空表单,但是由于输入具有必需的标记,浏览器仍会显示错误消息(至少Chrome会这样做).

我看了类似的问题,并且:

• 我也看了这个答案:https://stackoverflow.com/a/16296941/545925然而jsfiddle的行为与我的例子完全相同:输入被清除后仍然有一个ng-invalid-required类剩余(并且它也触发HTML5错误消息)
• 因为我不在1.1.x分支$setPristine()上,因此我无法使用 $setPristine() 表现方式相同

我当然可以编写一个函数来遍历表单的元素并删除每个类ng-invalid-required和ng-invalid类,但这不是我想要解决的方法.这就是我用jQuery做的事情.

Answer 1

你使用$ setPristine吗？您可以轻松地在您的小提琴中看到,如果您添加它,它就可以工作.http://jsfiddle.net/X6brs/

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

function MyCtrl($scope) {
    $scope.things = [];
    $scope.addThing = function(thing) {
        $scope.things.push(thing);
        $scope.thing = {};
        $scope.thingForm.$setPristine(true);
    };
}