Question

我刚开始使用ng-message。我有一条错误消息（表单。$ 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 attritbutes更改为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。

＆＃13;

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

＆＃13;

清除控制器

3 个答案: