使用ngModelController Angularjs验证两个相互依赖的输入字段

时间:2016-09-13 17:52:22

标签: javascript jquery angularjs validation ng-messages

我想用一个$ validators属性验证两个输入值。 对于$ validators函数,只能使用viewValue访问相应输入fild的ng-model值。

HTML看起来像这样:

<form name="reverInputForm" ng-submit="vm.insertReverInformation(reverInputForm)">
    <div class="row">
        <div class="form-group col-lg-2">
            <label>
                Kühlung:<span style="color:red;">*</span>
            </label>
        </div>
        <div class="col-lg-10">
            <div ng-class="{'has-error':reverInputForm.reverProducerNameInput.$invalid && reverInputForm.$submitted}">
                <input name="reverProducerNameInput"
                       class="form-control"
                       type="text"
                       placeholder="Hersteller eingeben"
                       generalvalidations
                       ng-model="vm.ReverType.ReverProducer.Name"
                       ng-model-options="{updateOn:'submit'}" />
                <div ng-messages="reverInputForm.reverProducerNameInput.$error"
                     ng-show="reverInputForm.$submitted"
                     style="padding:0.2% 0% 0.4% 0%">
                    <div class="label-danger small validationErrorBlock">
                        <div ng-messages-include="validation-error-messages" />
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group col-lg-2">
            <label>
                Typ:<span style="color:red;">*</span>
            </label>
        </div>
        <div class="col-lg-10">
            <div ng-class="{'has-error':reverInputForm.reverTypNameInput.$invalid && reverInputForm.$submitted}">
                <input name="reverTypNameInput"
                       type="text"
                       class="form-control"
                       placeholder="Typ eingeben"
                       generalvalidations
                       ng-model="vm.ReverType.Name"
                       ng-model-options="{updateOn:'submit'}" />
                <div ng-messages="reverInputForm.reverTypNameInput.$error"
                     ng-show="reverInputForm.$submitted"
                     style="padding:0.2% 0% 0.4% 0%">
                    <div class="label-danger small validationErrorBlock">
                        <div ng-messages-include="validation-error-messages" />
                    </div>
                </div>
            </div>
        </div>
    </div>

自定义验证器称为generalvalidations。此验证在两个输入字段中都包含as属性。 $ validator看起来像这样:

var generalValidations;
(function (generalValidations)
{
    'use strict';
    var generalValidations = (function ()
    {
        function generalValidations($compile)
        {
            var _this = this;
            this.restrict = 'A';
            this.require = 'ngModel';
            generalValidations.prototype.link = function (scope, element, attrs, ngModelCtrl)
            {
                ngModelCtrl.$validators.notEmpty = function (modelValue, viewValue)
                {
                    if (viewValue == '' || viewValue == null)
                        return false;
                    return true;
                };
            };
        }
        return generalValidations;
    }());
    generalValidations.generalValidations = generalValidations;
    angular.module('euroscan').directive('generalvalidations', function () { return new generalValidations(); });
})(generalValidations || (generalValidations = {}));

我知道有效会被叫两次。但我希望能够在那个时候访问两个ng模型值。有一种我不知道的常见方式。我认为angularjs应该提供一个定义明确的解决方案。例如,范围不包含第二个值。

有人知道吗? 谢谢你。

克莱门特

0 个答案:

没有答案