Question

我是angularjs的新手，我很感激能得到的所有帮助。

我有一个角度表单，用户可以在其中创建键值输入字段。我正在应用逻辑来检查该对用户是否已输入。如果他们已输入，则仅显示该特定输入字段的消息。但是，指令会向每个输入字段显示消息。

感谢

function ruleValue(val){
    var code = scope.listOfValue[scope.index].code;
    var value = scope.listOfValue[scope.index].value;
    var idx = parseInt(scope.index);
    var list = scope.listOfValue;

    //compare code with code 
    // if code is same then check it's value 
    // if both same then throw an error 
    for (var i=0; i<list.length; i++) {
        if (i !== idx) {
            if (list[i].code === list[idx].code && list[i].value === val) {
                console.log(list[i].value, i )
                console.log(list[idx].value, idx)
                console.log(i, idx, list[i], list[idx]);
                ctrl.$setValidity('userRuleAlreadyExist', false);
                break;
            }
        }else{
            ctrl.$setValidity('userRuleAlreadyExist', true);
        }
    }
};

ctrl.$parsers.unshift(function(value){
    ruleValue(value);
    return value
});

HTML：

<div ng-show="userRule.type === 'maplist'">
    <label>Values</label>
    <div class="row" ng-repeat="v in userRule.values" ng-show="userRule.type === 'maplist'" >
        <div class="col-sm-5">
            <div class="form-group">
                <label class="sub-list">Code:*</label> 
                <input name="code" 
                       type="text" 
                       ng-model="v.code" 
                       class="form-control"
                       placeholder="M"
                       no-special-char
                       user-rule-values-check
                       index="{{$index}}"
                       cv="code"
                       list-of-value="userRule.values"
                       required>
                <div class="help-block" ng-messages="form.code.$error"
                     ng-if="form.code.$touched && form.code.$error">
                    <div ng-messages-include="partials/includes/messages.html"></div>
                </div>
            </div>
        </div>
        <div class="col-sm-5">
            <div class="form-group">
                <label class="sub-list">Value:*</label> 
                <input name="value" 
                       type="text" 
                       ng-model="v.value" 
                       class="form-control"
                       placeholder="Medical"
                       no-special-char
                       user-rule-values-check
                       index="{{$index}}"
                       cv="value"
                       list-of-value="userRule.values"
                       required>
                <div class="help-block" ng-messages="form.value.$error"
                     ng-if="form.value.$touched && form.value.$error">
                    <div ng-messages-include="partials/includes/messages.html"></div>
                </div>
            </div>

Answer 1

您在表单中使用了ng-repeat，因此有多个form.value因此当其中一个出现错误时，系统会显示所有错误消息。你真的想要嵌套的<ngForm>元素。

<div class="row" ng-repeat="v in userRule.values" ng-show="userRule.type === 'maplist'" >
  <ng-form name="rowForm">
    ...
    <input name="value"/>
    <div ng-messages="rowForm.value.$error" ng-if=rowForm.value.$touched && rowForm.value.$error">
      ...
    </div>
  </ng-form>
</div>

参考：https://docs.angularjs.org/api/ng/directive/form

Angular Directive向所有字段显示消息，而不是向特定字段显示消息？

1 个答案: