Question

以角度1.5

创建一个表单

< form name="movieForm" ng-submit="addMovie(movie) ../>

当我尝试使用

提交表单后重置表单

$scope.movieForm.$setPristine()

但它在控制台中出错： 无法读取未定义的属性'$ setPristine'

form.html

<form name="movieForm" novalidate role="form" ng-submit="movieForm.$valid && addMovie(movie)">
  <input type="text" ng-model="movie.name" name="mName" required />
  <input type="text" ng-model="movie.star" name="mStar" />
  <input type="number" ng-model="movie.year" name="mYear" required />  
  <input type="submit" value="Save" />
  <input type="button" value="Reset" ng-disabled="movieForm.$pristine" ng-click="reset()" />
</form>

app.js

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

  app.controller('movieController', function($scope) {
      $scope.title = "Home Page";
      $scope.movieData = [{
        name: 'PiKu',
        star: 'Irrfan Khan',
        releaseYear: '2015'
      }];
      $scope.addMovie = function(movie) {
        if(movie && movie.name) {
            $scope.movieData.push({
                name : movie.name,
                star : movie.star,
                releaseYear : movie.year
            });
        }
      };

      $scope.reset = function() {
        $scope.movieForm.$setPristine();
        $scope.movieForm.$setUntouched();
      };

      // **un-commenting below line gives error in console** 

      //$scope.reset();

    });

}());

还检查了控制台中的$scope.movieForm()但未定义？

问题是什么？

请参阅DEMO

Answer 1

您尝试在实际初始化绑定之前访问$scope.movieForm。

修改
要明确：$setPristine - 不清除表单字段。要清除表单字段，您只需重置表单控件绑定的对象：

$scope.movie = {};

here's工作演示

Answer 2

我认为你使用的是$ setPristine错误。

＆＃34;可以调用此方法来删除＆＃39; ng-dirty＆＃39; class并将表单设置为其原始状态（ng-pristine类）。此方法还将传播到此表单中包含的所有控件。＆＃34;

所以这只清除了类而不是$ scope变量。您必须重置$ scope.movie变量。

例如我添加了这个默认表单变量

var defaultForm={
  name: "",
  star: "",
  year: ""
}

并修改了您的重置代码

 $scope.reset = function() {       
        $scope.movie = angular.copy(defaultForm);
        $scope.movieForm.$setPristine();
 };

这很好用。

查看小提琴。

http://output.jsbin.com/hugiye/2

Answer 3

根据angular docs $ setPristine（）：

＆＃34;可以调用此方法来删除＆＃39; ng-dirty＆＃39; class并将表单设置为其原始状态（ng-pristine类）。此方法还将传播到此表单中包含的所有控件。＆＃34;

这只复制了类而不是实际的范围变量。

如果要将范围变量设置为默认状态，则还应重置范围变量。

`

var movie = {
        name: '',
        star: '',
        year: ''
      };

在您的重置功能中，您必须添加此

$scope.movie = angular.copy(movie);

`

$ scope.formName。$ setPristine（）不起作用;如何以角度重置表单？

form.html

app.js

3 个答案: