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);
    };
}

Answer 2

$scope.thingForm.$setPristine();
$scope.thingForm.$setUntouched();

会做到这一点。

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

2 个答案: