清除控制器中的ng消息

Question

我是使用ng-message的新手。 当用户输入和更改其不正确的条目时，我不希望看到错误消息（下面是form。$ error）。 我如何在用户键入内容时a）正确使用ng-focus或b）清除控制器中的ng-messages？ 我对a）使用ng-focus的尝试在下面，但是没有用。 我还尝试用ng-change替换ng-focus，但这仍然行不通。 是否还可以通过清除ng-message来手动禁用错误消息以使其不显示在控制器中？

我的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>

这是我控制器中的主要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-message进行操作。

<form class="form-signin hide" id="gbLoginForm" method="POST" name="loginform" ng-controller="LoginCtrl" novalidate>
            <div class="form-group">
              <label for="username">User Name</label>
              <input type="text" class="form-control" id="username" name="email" placeholder="User name/email" ng-model="user.email"  required autofocus>
              <span class="has-error" ng-show="loginform.email.$dirty && loginform.email.$error.required">
                <span class="help-block" ng-bind="getValue('EMPTYEMAIL')"></span>
              </span>
              <span class="has-error" ng-show="loginform.email.$dirty && !loginform.email.$error.required && loginform.email.$error.validemail">
                <span class="help-block" ng-bind="getValue('INVALIDEMAIL')"></span>
              </span>
            </div></form>
// email field is empty
        if(!$scope.user.email){
            $scope.loginform.email.$dirty = true;
            $scope.loginform.email.$setValidity('required', false);
            return false;
        }

  //invalid email
        if(!UtilityService.validateEmail($scope.user.email)) {
            $scope.loginform.email.$dirty = true;                
            $scope.loginform.email.$setValidity('validemail', false);
            return false;
        }

Answer 2

您非常接近，只是在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
})();

Answer 3

您不需要使用ng-blur或ng-keyup ，因为在更改输入时角度刷新ngModel。

要创建各种检查，可以使用指令use-form-error 。

实时示例jsfiddle 。

 <form name="ExampleForm"> <label>Code 1</label> <input ng-model="code1" required/> <label>Code 2</label> <input ng-model="code2" required/> <div use-form-error="isSame" use-error-expression="code1 && code1==code2" ng-show="ExampleForm.$error.isSame">Inputs can't be the same</div> </form>