指令驗證器不捕獲空字段，但填充字段

Question

我有以下AngularJS代碼。當我按提交按鈕時，它應該檢查輸入字段是否爲空。提交按鈕廣播指令成功捕獲的自定義事件。但是當字段爲空時它不起作用。它到達ctrl。$ parsers.unshift當我開始輸入時，我的字段變成了form.name。$ invalid === true。它似乎以相反的方式工作。

define(['angular'], function (angular) { 
    "use strict"; 

    var requiredValidator = angular.module('RequiredValidator', []); 
    requiredValidator.directive('validateRequired', function() { 
    var KEY_ERROR = "required"; 

    return { 
     scope: { 
     validateRequired: '=validateRequired' 
     }, 
     require: 'ngModel', 
     link: function (scope, elem, attr, ctrl) { 

     function validate(value) { 
      var valid = !value || value === '' || value === null; 
      ctrl.$setValidity(KEY_ERROR, valid); 
      return value; 
     } 

     scope.$on('validateEvent', function (event, data) { 
      if (scope.validateRequired.$submitted) { 
      console.log("Reachable block when submitted"); 
      ctrl.$parsers.unshift(function (value) { 
       console.log("Unreachable when input is empty"); 
       return validate(value); 
      }); 

      ctrl.$formatters.unshift(function (value) { 
       return validate(value); 
      }); 
      } 
     }); 

     } 
    }; 
    }); 
    return requiredValidator; 
}); 

表單域片段：

<div> 
    <input type="text" name="name" 
    data-ng-class="{ error : theForm.name.$invalid}" 
    data-ng-model="customer.name" 
    data-validate-required="theForm"> 
    <span data-ng-show="theForm.name.$invalid" class="error">{{getInputErrorMessage(theForm.name.$error)}}</span> 
</div> 

Answer 1

你其實並不需要爲您的SZENARIO這樣一個複雜的指令。您還可以處理邏輯控制器中，像這樣：

var app = angular.module('form-example', ['ngMessages']); 
 

 
app.controller('FormCtrl', function($scope) { 
 
    var vm = this; 
 

 
    vm.submit = function(form) { 
 
    if (form.$invalid) { 
 
     angular.forEach(form.$error.required, function(item) { 
 
     item.$dirty = true; 
 
     }); 
 
     form.$submitted = false; 
 
    } else { 
 
     alert('Form submitted!'); 
 
    } 
 
    }; 
 
});

label, 
 
button { 
 
    display: block; 
 
} 
 
input { 
 
    margin: 5px 0; 
 
} 
 
button { 
 
    margin-top: 10px; 
 
} 
 
form { 
 
    margin: 10px; 
 
} 
 
div[ng-message] { 
 
    margin-bottom: 10px; 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-messages.js"></script> 
 

 
<form ng-app="form-example" name="myForm" ng-controller="FormCtrl as vm" novalidate="" ng-submit="vm.submit(myForm)"> 
 
    <label for="username">Username</label> 
 
    <input id="username" type="text" name="username" ng-model="vm.username" required="" /> 
 
    <div ng-messages="myForm.username.$error" ng-if="myForm.username.$dirty" role="alert"> 
 
    <div ng-message="required">Username is required</div> 
 
    </div> 
 
    <label for="email">E-Mail</label> 
 
    <input id="email" type="email" name="email" ng-model="vm.email" required="" /> 
 
    <div ng-messages="myForm.email.$error" ng-if="myForm.email.$dirty" role="alert"> 
 
    <div ng-message="required">E-Mail is required</div> 
 
    <div ng-message="email">Your E-Mail is not valid</div> 
 
    </div> 
 
    <button type="submit">Send</button> 
 
</form>

這需要使用至少AngularJS 1.3.0版本，因爲我用的是內部的FormController的$submitted財產。欲瞭解更多信息，請查看FormController上的documentation。我也使用了1.334中介紹的ngMessages。如果您想在表單中顯示有關錯誤的消息，這非常有用。