Angularjs使用$ touch输入重置表单

时间:2015-08-24 21:25:25

标签: javascript html angularjs

我想在点击外部输入之前重置表单。但在重置数据之前,错误消息会闪烁。知道怎么做而不闪烁吗?

Plunker:http://plnkr.co/edit/hOBZ3vAjBhFNEzq1EReF?p=preview

HTML:          

<head>
   <link rel="stylesheet" href="style.css">
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
   <script src="script.js"></script>
</head>

<body ng-app="myApp">
 <form name="myForm" novalidate ng-controller="myCtrl">
   <input type="text" name="field" ng-minlength="8" ng-model="field">
   <span ng-if="myForm.field.$invalid && myForm.field.$touched" style="color: red">Error</span>
   <br>
   <a href="" ng-click="reset()">Reset</a>
 </form>
</body>

</html>

Javascript:

var app = angular.module("myApp", []);  

app.controller("myCtrl", function($scope){

   $scope.reset = function(){
       $scope.field = "";
   }
});

1 个答案:

答案 0 :(得分:0)

您应该使用ng-model-options来处理这种特殊情况,您可以在特定的间隔时间后更新实际的ng模型值

  <input type="text" name="field" ng-minlength="8" ng-model="field" 
    ng-model-options="{ debounce: { 'default': 500, 'blur': 200 } }"/>

Working Plunkr