Question

我们是角度新手，我们希望对我们的表格使用角度验证。我们使用带有kendo网格的异步ajax调用来获取，创建，编辑和保存数据，而无需任何提交。当用户选择创建新记录时，我很难弄清楚如何重置表单的验证状态。

我做了这个小小的尝试，尝试了迄今为止我在沙发上找不到任何运气的任何东西：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-messages.min.js"></script>
<div ng-app="app">
  <div ng-controller="ValidationController">
    <form name="myForm" novalidate>
      <label>
        Name
        <input name="nombre"
               ng-model="field"
               required />
      </label>
      <div ng-messages="myForm.$error">
        <div ng-message="required" ng-if="myForm.nombre.$touched" ng-messages-include="myMessages">
        </div>
      </div>
      <button type="button" ng-click="reset(myForm);" value="Reset">reset validation</button>
    </form>

    <script type="text/ng-template" id="myMessages">
      <div ng-message="required">required field</div>
    </script>
  </div>
</div>
<script>
    angular.module('app', ['ngMessages']).controller("ValidationController", function ($scope, $window) {
      $scope.reset = function (form) {
        form.$setPristine();
        form.$setUntouched();
        form.$setValidity();
        form.nombre.$setPristine();  
        form.nombre.$setValidity();
        form.nombre.$setUntouched();
      }
    });
</script>

这是我的小提琴： https://jsfiddle.net/yh9q1a2j/

Answer 1

更新

我认为这更适合您的需求。我已经更新了小提琴

https://jsfiddle.net/n7qqn1x6/6/

在你的reset方法中，调用$ setPristine并清除formData对象。

$scope.formData = {};
$scope.myForm.$setPristine();

要在添加后从页面中删除错误消息，我必须使用ng-show而不是ng-if

<div ng-show="myForm.nombre.$error.required&&myForm.nombre.$dirty">required</div>

将表单重置为预验证状态？

1 个答案: