8

我正在使用表单将元素添加到表单侧面显示的列表中。标记是： 

  <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 所做的。

4

2 回答 2

9

你使用 $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);
    };
}
于 2013-07-23T16:20:35.393 回答
1 
$scope.thingForm.$setPristine();
$scope.thingForm.$setUntouched();

会成功的。

于 2015-10-01T19:59:09.067 回答