동적으로 생성 된 필드에 조건부로 클래스 추가

Question

ng-class 지시문을 사용하여 일종의 유효성 검사를하고 있지만 ng-repeat 만든 요소를 ​​처리하기 시작할 때 문제가 있습니다.

<div class="traveler" ng-repeat="i in getNumber(travelers_count) track by $index" style="margin-top: 15px"> 
         <div class="inp-wr wr-traveler"> 
          <input 
           ng-class="{ 'has-error' : valError && mainForm.last_name[{{$index + 1}}].$invalid}" 
           required 
           class="text-inp" 
           style="width: 200px" 
           ng-model="$parent.last_name[$index]" 
           ng-model-options="{ updateOn: 'blur' }" 
           ng-pattern="namePattern" 
           name="last_name[{{$index + 1}}]" 
           placeholder = "Last name"> 
         </div> 
</div> 

이 방법을 사용할 수 있습니까? ng-class="{ 'has-error' : valError && mainForm.last_name[{{$index + 1}}].$invalid}"

Answer 1

찾을 빠른 해결책 - <ng-form>에 입력을 포장하고 그것의 유효성을 확인해야합니다. 즉

<div class="traveler" ng-repeat="i in getNumber(travelers_count) track by $index" style="margin-top: 15px"> 
          <div class="inp-wr wr-traveler"> 
<ng-form name="lastNameForm"> 
           <input 
            ng-class="{ 'has-error' : valError && lastNameForm.$invalid}" 
            required 
            class="text-inp" 
            style="width: 200px" 
            ng-model="$parent.last_name[$index]" 
            ng-model-options="{ updateOn: 'blur' }" 
            ng-pattern="namePattern" 
            name="last_name[{{$index + 1}}]" 
            placeholder = "Last name"> 
</ng-form> 
          </div> 
    </div> 

Answer 2

대괄호가 필요하지 않습니다.

mainForm.last_name[$index + 1].$invalid