Question

我想要一些关于改进/设计Angular方式的自定义表单验证（多个字段）的反馈。

我有一些由ngRepeat生成的表单输入字段。基本上，下一个输入必须大于前一个输入。我称这些字段为beginLevel。

我目前的实施情况如下：我正在使用ngBlur来调用控制器函数。这个函数在我的模型中循环比较index[i].beginsAtLevel 与index[i-1].beginsAtLevel。如果当前的beginAtLevel小于之前的startsAtLevel，我会抓取form-group的id，例如

previousIndex = angular.element(document.querySelector('#beginsAtLevel' + (i - 1)));和

currentIndex = angular.element(document.querySelector('#beginsAtLevel' + i));。

随后，我将has-error类添加到输入字段中。

previousIndex.addClass('has-error'); currentIndex.addClass('has-error');

我还有另一个函数removeErrors()，它遍历我的模型并删除has-error类。

这种方法有效，但我觉得它有点像黑客。我怎样才能使用指令实现/改进它？我在网上看到很多例子，一次只验证一个输入。

以下是我的参考功能：

function validateTiersBeginLevel(tiers) {
    var previous, current, previousIndex, currentIndex;

    for (var i = 1; i < tiers.length; i++) {
        previous = tiers[i - 1].beginsAtLevel;
        current = tiers[i].beginsAtLevel;

        if (Number(current) <= Number(previous)) {

            previousIndex =
                angular.element(document.querySelector('#beginsAtLevel' + (i - 1)));
            currentIndex =
                angular.element(document.querySelector('#beginsAtLevel' + i));
            previousIndex.addClass('has-error');
            currentIndex.addClass('has-error');
        } else {
            clearErrors(tiers);
        }
    }
}

以及ngRepeat生成的输入字段：

<div class="form-group" 
    ng-class="{'has-error': tierForm.beginsAtLevel{{$index}}.$touched &&  
        tierForm.beginsAtLevel{{$index}}.$invalid}" 
        id="beginsAtLevel{{$index}}">
    <p class="col-md-4 col-xs-4">Begin Level</p>
    <div class="col-md-8 col-xs-8">
        <input type="text"
            class="form-control" 
            name="beginsAtLevel{{$index}}" 
            ng-model="tier.beginsAtLevel" 
            ng-blur="rp.validateTiersBeginLevel(tiers);" 
            required>
        <div class="text-danger" 
            ng-messages="tierForm['beginsAtLevel'+ $index].$error" 
            ng-if="tierForm['beginsAtLevel'+ $index].$touched">
            <span ng-message="required">Begin Level is required</span>
        </div>
    </div>
</div>

设计由ngRepeat生成的角度自定义表单验证（多个字段）

0 个答案: