javascript - 没有表单名称时如何在AngularJS中清除表单

Question

我想在 Angular 中使用 $setPristine() 和 $setUntouched() 函数来清除表单域。但是，它们似乎只适用于有名称的表单。如果我的表单没有名称，只有一个简单的提交功能怎么办？

我在这里阅读了文档:https://docs.angularjs.org/api/ng/type/form.FormController

这不起作用:

    $scope.submit = function() {

        // blah blah

        // Resets the form fields to blank
        // I could simply do
        // $scope.field1 = '';
        // $scope.field2 = '';
        // But I want it to look cleaner

        This.$setPristine();
        This.$setUntouched();

    };

Answer 1

Angular 只会为命名表单创建 FormController 的实例，因为表单名称用作代表您范围内特定表单的 FormController 实例的属性。如果没有任何名称，它将无法将 FormController 实例关联到作用域上的任何属性名称。

例如，给定以下标记

<div ng-controller="MyController">

    <form name="myForm" id="myForm" ng-submit="handleSubmit()">
      /* Some Markup */
    </form>

</div>

在您的 MyController 中，$scope 有一个名为 myForm 的属性，代表 FormController 实例，您可以像下面这样调用方法或访问属性。

$scope.myForm.$valid
$scope.myForm.$setPristine();
$scope.myForm.$setUntouched();

调用 setPristine() 和 setUntouched() 只会将表单状态从 dirty 更改为 pristine 并且untouched 从添加到表单的类中可以明显看出，但不要重置表单字段。 FormController 上没有公开方法来重置表单字段和相应的模型值，但您可以通过使用 ng-model< 绑定(bind)值的方式进行一些小的更改来实现这一点。在您的模型中使用点 (.) 是一种很好的做法，因为它允许在单个对象中捕获所有表单状态，并且还可以防止您创建影子属性。

在您的 HTML 中，

<input type="text" id="fullName" name="fullname" ng-model="data.fullName"/>
<input type="email" id="email" name="email" ng-model="data.email" /> 

在你的 Controller 中，

angular.module('MyApp', [])
      .controller('MyController', function($scope) {

  $scope.data = {
    fullName : '',
    email : ''
  };


  $scope.resetForm = function(){
   /* reset the data to a new object so that all the properties
    * of form are reset
    */
    $scope.data = {};
  };

});

这是一个示例 Pen在行动中。希望这会有所帮助:)