24

我有一个角形式。使用ng-pattern属性验证字段。我也有一个重置按钮。我正在使用Ui.Utils 事件绑定器来处理reset事件，如下所示：

<form name="searchForm" id="searchForm" ui-event="{reset: 'reset(searchForm)'}" ng-submit="search()">
  <div>
    <label>
      Area Code
      <input type="tel" name="areaCode" ng-model="areaCode" ng-pattern="/^([0-9]{3})?$/">
    </label>

    <div ng-messages="searchForm.areaCode.$error">
      <div class="error" ng-message="pattern">The area code must be three digits</div>
    </div>
  </div>

  <div>
    <label>
      Phone Number
      <input type="tel" name="phoneNumber" ng-model="phoneNumber" ng-pattern="/^([0-9]{7})?$/">
    </label>

    <div ng-messages="searchForm.phoneNumber.$error">
      <div class="error" ng-message="pattern">The phone number must be seven digits</div>
    </div>
  </div>

  <br>
  <div>
    <button type="reset">Reset</button>
    <button type="submit" ng-disabled="searchForm.$invalid">Search</button>
  </div>
</form>

如您所见，当表单被重置时，它会reset调用$scope. 这是整个控制器的样子：

angular.module('app').controller('mainController', function($scope) {
    $scope.resetCount = 0;

    $scope.reset = function(form) {
        form.$setPristine();
        form.$setUntouched();
        $scope.resetCount++;
    };

    $scope.search = function() {
        alert('Searching');
    };
});

我正在调用form.$setPristine()and form.$setUntouched，遵循Stack Overflow 上另一个问题的建议。我添加计数器的唯一原因是证明正在调用代码（确实如此）。

问题是即使在重置表单之后，验证消息也不会消失。您可以在Plunker上查看完整代码。这是一个屏幕截图，显示错误不会消失：

验证错误

4

10 回答 10

22

我从@Brett 的评论开始，并以此为基础。我实际上有多个表单，每个表单都有很多字段（不仅仅是显示的两个）。所以我想要一个通用的解决方案。

我注意到 Angularform对象对每个控件（输入、选择、文本区域等）以及其他一些 Angular 属性都有一个属性。但是，每个 Angular 属性都以美元符号 ( ) 开头$。所以我最终这样做了（包括为了其他程序员的利益而发表的评论）：

$scope.reset = function(form) {
    // Each control (input, select, textarea, etc) gets added as a property of the form.
    // The form has other built-in properties as well. However it's easy to filter those out,
    // because the Angular team has chosen to prefix each one with a dollar sign.
    // So, we just avoid those properties that begin with a dollar sign.
    let controlNames = Object.keys(form).filter(key => key.indexOf('$') !== 0);

    // Set each control back to undefined. This is the only way to clear validation messages.
    // Calling `form.$setPristine()` won't do it (even though you wish it would).
    for (let name of controlNames) {
        let control = form[name];
        control.$setViewValue(undefined);
    }

    form.$setPristine();
    form.$setUntouched();
};
于 2015-06-23T20:20:14.967 回答
7 
      $scope.search = {areaCode: xxxx, phoneNumber: yyyy}

像上面一样将表单中的所有模型组织在一个地方，因此您可以像这样清除它：

      $scope.search = angular.copy({});

之后，您可以调用它来重置验证：

      $scope.search_form.$setPristine();
      $scope.search_form.$setUntouched();
      $scope.search_form.$rollbackViewValue();
于 2016-08-07T08:10:45.847 回答
6

似乎没有一种简单的方法来重置 $errors 角度。最好的方法可能是重新加载当前页面以从新表单开始。或者，您必须使用此脚本手动删除所有 $error ：

form.$setPristine(true);
form.$setUntouched(true);

// iterate over all from properties
angular.forEach(form, function(ctrl, name) {
  // ignore angular fields and functions
  if (name.indexOf('$') != 0) {
    // iterate over all $errors for each field        
    angular.forEach(ctrl.$error, function(value, name) {
      // reset validity
      ctrl.$setValidity(name, null);
    });
  }
});
$scope.resetCount++;
于 2015-06-23T20:28:57.330 回答
5

您可以添加验证标志并根据其值在 HTML 中ng-if或ng-show在 HTML 中显示或隐藏错误。该表单有一个 $valid 标志，您可以将其发送到您的控制器。

ng-if将删除或重新创建元素到 DOM，同时ng-show将添加它但不会显示它（取决于标志值）。

编辑：正如迈克尔所指出的，如果表单被禁用，我指出的方式将不起作用，因为表单从未提交。相应地更新了代码。

HTML

<form name="searchForm" id="searchForm" ui-event="{reset: 'reset(searchForm)'}" ng-submit="search()">
  <div>
    <label>
      Area Code
      <input type="tel" name="areaCode" ng-model="areaCode" ng-pattern="/^([0-9]{3})?$/">
    </label>

    <div ng-messages="searchForm.areaCode.$error">
      <div class="error" ng-message="pattern" ng-if="searchForm.areaCode.$dirty">The area code must be three digits</div>
    </div>
  </div>

  <div>
    <label>
      Phone Number
      <input type="tel" name="phoneNumber" ng-model="phoneNumber" ng-pattern="/^([0-9]{7})?$/">
    </label>

    <div ng-messages="searchForm.phoneNumber.$error">
      <div class="error" ng-message="pattern" ng-if="searchForm.phoneNumber.$dirty">The phone number must be seven digits</div>
    </div>
  </div>

  <br>
  <div>
    <button type="reset">Reset</button>
    <button type="submit" ng-disabled="searchForm.$invalid">Search</button>
  </div>
</form>

JS

$scope.search = function() {
    alert('Searching');
};

$scope.reset = function(form) {
     form.$setPristine();
     form.$setUntouched();
     $scope.resetCount++;
 };

带有工作解决方案的 Codepen：http: //codepen.io/anon/pen/zGPZoB

于 2015-06-23T18:21:15.423 回答
2

看起来我必须在reset做正确的行为。不幸的是，使用标准重置失败了。我也不包括图书馆ui-event。所以我的代码和你的有点不同，但它可以满足你的需要。

<form name="searchForm" id="searchForm" ng-submit="search()">
  pristine = {{searchForm.$pristine}} valid ={{searchForm.$valid}}
  <div>
    <label>
      Area Code
      <input type="tel" required name="areaCode" ng-model="obj.areaCode" ng-pattern="/^([0-9]{3})?$/" ng-model-options="{ allowInvalid: true }">
    </label>

    <div ng-messages="searchForm.areaCode.$error">
      <div class="error" ng-message="pattern">The area code must be three digits</div>
      <div class="error" ng-message="required">The area code is required</div>
    </div>
  </div>

  <div>
    <label>
      Phone Number
      <input type="tel" required name="phoneNumber" ng-model="obj.phoneNumber" ng-pattern="/^([0-9]{7})?$/" ng-model-options="{ allowInvalid: true }">
    </label>

    <div ng-messages="searchForm.phoneNumber.$error">
      <div class="error" ng-message="pattern">The phone number must be seven digits</div>
      <div class="error" ng-message="required">The phone number is required</div>
    </div>
  </div>

  <br>
  <div>
    <button ng-click="reset(searchForm)" type="reset">Reset</button>
    <button type="submit" ng-disabled="searchForm.$invalid">Search</button>
  </div>
</form>

和 JS：

$scope.resetCount = 0;
$scope.obj = {};
$scope.reset = function(form_) {
  $scope.resetCount++;
  $scope.obj = {};
  form_.$setPristine();
  form_.$setUntouched();
  console.log($scope.resetCount);
};

$scope.search = function() {
  alert('Searching');
};

jsfiddle上的实时示例。

注意指令ng-model-options="{allowinvalid: true}"。必须使用它，否则在输入字段无效之前，不记录模型值。因此，复位将不起作用。

PS 将值（areaCode、phoneNumber）放在对象上简化了净化。

于 2016-02-02T09:17:16.400 回答
2

以下为我工作

let form = this.$scope.myForm;   
let controlNames = Object.keys(form).filter(key => key.indexOf('$') !== 0);
for (let name of controlNames) {
    let control = form [name];
    control.$error = {};
}

简而言之：要摆脱 ng-messages 错误，您需要清除每个表单项的$error对象。

于 2017-02-28T00:35:05.463 回答
1

进一步@battmanz 的回答，但不使用任何 ES6 语法来支持旧浏览器。

 $scope.resetForm = function (form) {

            try {
                var controlNames = Object.keys(form).filter(function (key) { return key.indexOf('$') !== 0 });

                console.log(controlNames);
                for (var x = 0; x < controlNames.length; x++) {
                    form[controlNames[x]].$setViewValue(undefined);
                }

                form.$setPristine();
                form.$setUntouched();
            } catch (e) {                
                console.log('Error in Reset');
                console.log(e);
            }

        };
于 2016-10-17T09:35:11.573 回答
1

我有同样的问题，并试图做 battmanz 解决方案（接受的答案）。

我很确定他的回答非常好，但是对我来说它不起作用。

我使用 ng-model 来绑定数据，使用 angular 材质库作为输入，使用 ng-message 指令作为错误消息，所以我所说的可能只对使用相同配置的人有用。

我看了很多 javascript 中的 formController 对象，实际上有很多 $ angular 函数，正如 battmanz 指出的那样，此外还有你的字段名称，它们是在其字段中具有一些函数的对象。

那么什么是清除您的表格？

通常我把一个表单看作一个 json 对象，所有的字段都绑定到这个 json 对象的一个​​键上。

//lets call here this json vm.form
vm.form = {};

//you should have something as ng-model = "vm.form.name" in your view

因此，首先要清除表单，我刚刚回调了提交表单：

vm.form = {};

正如在这个问题中所解释的那样，ng-messages 不会随之消失，这真的很糟糕。

当我使用他写的battmanz解决方案时，消息不再出现，但提交后字段不再为空，即使我写了

vm.form = {};

我发现这很正常，因为使用他的解决方案实际上从表单中删除了模型绑定，因为它将所有字段设置为未定义。所以文本仍然在视图中，因为不知何故不再有任何绑定，它决定留在 HTML 中。

那么我做了什么？

实际上我只是清除了该字段（将绑定设置为 {}），并且只使用了

form.$setPristine();
form.$setUntouched();

实际上这似乎是合乎逻辑的，因为绑定仍然在这里，表单中的值现在是空的，只有当表单没有被触及时，角度 ng-messages 指令才会触发，所以我认为这毕竟是正常的。

最终（非常简单）的代码是：

function reset(form) {
        form.$setPristine();
        form.$setUntouched();
};

我遇到的一个大问题：

只有一次，回调似乎在某个地方搞砸了，并且不知何故这些字段不是空的（就像我没有点击提交按钮一样）。

当我再次单击时，发送的日期为空。更奇怪的是，当一个必填字段没有用好的模式填充时，我的提交按钮应该被禁用，而空的肯定不是一个好的模式。

我不知道我的做法是最好的还是正确的，如果您对我遇到的问题有任何批评/建议或任何想法，请告诉我，我总是喜欢加强 angularJS。

希望这会对某人有所帮助，并对糟糕的英语感到抱歉。

于 2017-03-01T02:40:10.340 回答
0

您可以将 loginForm 对象传递给函数ng-click="userCtrl.login(loginForm) 和函数调用

this.login = function (loginForm){
  loginForm.$setPristine();
  loginForm.$setUntouched();
}
于 2016-01-21T09:10:07.430 回答
0

所以没有一个答案对我完全有用。ESP，清除视图值，所以我将所有答案结合起来清除视图值，清除错误和清除选择与 j 查询（提供的字段是输入和名称与模型名称相同） 

 var modelNames = Object.keys($scope.form).filter(key => key.indexOf('$') !== 0);
                    modelNames.forEach(function(name){
                        var model = $scope.form[name];
                        model.$setViewValue(undefined);
                        jq('input[name='+name+']').val('');
                        angular.forEach(model.$error, function(value, name) {
                          // reset validity
                          model.$setValidity(name, null);
                        });
                    });
                    $scope.form.$setPristine();
                    $scope.form.$setUntouched();
于 2018-01-17T19:37:27.730 回答