將模型傳遞給自定義的角度指令進行驗證

Question

我創建了一個小angularjs指令，用於替換頁面上的驗證錯誤

這是代碼

.directive('validationErrors', function() {
        return {
            templateUrl: '/Content/biz/templates/common/validation-errors.html',
            replace: true,
            restrict: 'E',
            scope: {
                modelToValidate: '=',
                modelMinLength: '=',
                modelMaxLength: '=',
                modelPattern: '='
            }
        }
    });

和它的模板

<div class="col-sm-5 pull-right" data-ng-show="modelToValidate.$dirty && modelToValidate.$invalid">
<span class="label label-warning" data-ng-show="modelToValidate.$error.required">This field is required!</span>
<span class="label label-warning" data-ng-show="modelToValidate.$error.minlength">Minimum field length should be  {{modelMinLength}}</span>
<span class="label label-warning" data-ng-show="modelToValidate.$error.maxlength">Maximum field length should be  {{modelMaxLength}}</span>
<span class="label label-warning" data-ng-show="modelToValidate.$error.pattern">Model should have {{modelPattern}}</span>

比我將其綁定到模型

 <div class="col-sm-4">
                            <input class="form-control" ng-model="data.Main.FullName" ng-maxlength="1000" required/>

這樣會生成標記

<div class="col-sm-4">
                            <input class="form-control ng-valid-maxlength ng-dirty ng-valid-parse ng-invalid ng-invalid-required ng-touched" ng-model="data.Main.FullName" ng-maxlength="1000" required="">
                            <div class="col-sm-5 pull-right ng-isolate-scope" model-to-validate="data.Main.FullName" model-max-length="1000">
<span class="label label-warning ng-hide" data-ng-show="modelToValidate.$error.required">This field is required!</span>
<span class="label label-warning ng-binding ng-hide" data-ng-show="modelToValidate.$error.minlength">Minimum field length should be </span>
<span class="label label-warning ng-binding ng-hide" data-ng-show="modelToValidate.$error.maxlength">Maximum field length should be 1000</span>
<span class="label label-warning ng-binding ng-hide" data-ng-show="modelToValidate.$error.pattern">Model should have </span>

但是，如果綁定模型有錯誤，則不會顯示任何內容。 請幫助我理解為什么會這樣。

Answer 1

我認為您需要傳遞給表單的是ngModelController實例，而傳遞給的是模型實例。

首先將輸入更改為具有名稱屬性

<input name="fullName" class="form-control" ng-model="data.Main.FullName" ng-maxlength="1000" required/> （還要確保您的表單具有name屬性，我們假設它是myForm ）

然后指令參數應該是

<div model-to-validate="myForm.FullName" model-max-length="1000">

現在應該可以了。 請記住，您正在使用的所有屬性（如$error都是在NgModelController實例上定義的，而不是在模型上定義的。

另外，您可以使用ngMessage在Angular 1.4中完成操作