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

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