javascript - 清除 Controller 中的 ng 消息

Question

我是 ng-message 的新手。当用户键入并更改其错误条目时，当我不希望出现错误消息(下面的 form.$error)时，我会显示一条错误消息。当用户打字时，我如何a)正确使用ng-focus或b)清除 Controller 中的ng-消息？我在 a) 使用 ng-focus 的尝试如下，但它不起作用。我还尝试用 ng-change 替换 ng-focus 但仍然不起作用。是否还可以通过清除 ng-message 来手动禁用错误消息在 Controller 中显示？

我的html。我尝试将表单设置为在用户键入时有效。

 <div class="col-xs-3">
    <input ng-focus="setValid()"
    class="form-control" required  ng-blur="checkCodes()"
    ng-model="code1">
</div>

在我的 html 中，我有另一个 div，当用户输入时，当我不希望它出现时，错误就会出现。

<div ng-if="codeError"
    ng-messages="form.$error">
    <p ng-show="code1 === code2"
    class="disabled-text long-error">Inputs can't be the same</p>
</div>

这是我的 Controller 中的主要 js:

 $scope.checkCodes = function() {


     if ($scope.code1 && $scope.code1 === $scope.code2) {

         $scope.showUniqueError = true;
         $scope.form.$setValidity("prop", false);
         $scope.showError2 = false;

     } else {
         $scope.showUniqueError = false;
         $scope.form.$setValidity("prop", true);

     }


 }
 //tried to use this in ng-focus but not working.
 $scope.setValid = function() {
        $scope.form.$setValidity("prop", true);

 }

Answer 1

您非常接近，只是 ng-if 中的作用域变量错误。

我还将 ng-blur 属性更改为 ng-keyup。使用 ng-blur，只有当您在文本框外部单击或另一个控件获得焦点时，才会显示错误消息。

在实际示例中，您将看到，如果您为每个输入框输入相同的值，则会显示错误，如果您将其中一个输入框更改为不同的值，则错误将被删除。

实例:http://codepen.io/larryjoelane/pen/QyOZNR

测试html:

     <div ng-app="test" ng-controller="testController"><!--begin app container-->

<div class="col-xs-3">
    <input ng-focus="setValid()"
    class="form-control" required  ng-blur="checkCodes()"
    ng-model="code1">

  <input ng-focus="setValid()"
    class="form-control" required  ng-blur="checkCodes()"
    ng-model="code2">
</div>



<div ng-if="showUniqueError"
    ng-messages="form.$error">
    <p ng-show="code1 === code2"
    class="disabled-text long-error">Inputs can't be the same</p>
</div>


</div><!--end app container-->

测试 Javascript(除了添加模块包装器和闭包之外没有更改):

     (function(){

  angular.module("test",[]).controller("testController",function($scope){

$scope.checkCodes = function() {


     if ($scope.code1 && $scope.code1 === $scope.code2) {

         $scope.showUniqueError = true;
         $scope.form.$setValidity("prop", false);
         $scope.showError2 = false;

     } else {
         $scope.showUniqueError = false;
         $scope.form.$setValidity("prop", true);

     }


 }
 //tried to use this in ng-focus but not working.
 $scope.setValid = function() {
        $scope.form.$setValidity("prop", true);

 }

  });//end controller
})();