Как оценить действительное свойство в форме с именем Dynami c в AngularJS

Question

Итак, у меня есть динамически сгенерированные формы, такие как angular JS. Я использую channel.tabNames, чтобы удостовериться, что у меня нет повторяющихся имен полей для нескольких форм, сгенерированных в al oop следующим образом.

<form ng-repeat="channel in ctr.model.mediaChannels" 
      novalidate 
      id="{{channel.tabName}}form" 
      name="{{channel.tabName}}form" 

У меня тогда есть поле, подобное этому, где я оцениваю имена полей для применения класса ошибок для проверки

<input type="text" 
       name="overrideComments{{channel.tabName}}" 
       ng-required="true" 
       ng-class="{'has-error':{{channel.tabName}}form.overrideComments{{channel.tabName}}.$invalid && {{channel.tabName}}form.$submitted}"
       ng-model="channel.mediaSummary.overrideComments" />

Пока все хорошо ... но когда я хочу передать свойство $ valid в форме методу, использующему ng-click, у меня возникают проблемы. .

<input class="btn btn-success p-2" type="submit" value="Add To Basket"
       ng-click="ctr.addToBasket(channel,{{channel.tabName}}form.$valid)" />

Что и дает эту ошибку ..

Синтаксическая ошибка: неверный ключ токена '{' в столбце 26 выражения [ctr.addToBasket (channel, {{channel) .tabName] начиная с [{channel.tabName].

Как еще можно передать свойство $valid формы? Я знаю, что можно использовать проверку jquery на контроллере angular ... но это добавляет свои собственные сообщения, и я бы предпочел сделать это angular способ ..

Спасибо

Answer 1

Избегайте использования двойных фигурных скобок ({{ }}) в выражениях AngularJS:

<input type="text" name="overrideComments" ng-required="true" 
    ng-class="{'has-error': ̶v̶m̶.̶f̶o̶r̶m̶s̶.̶f̶o̶r̶m̶{̶{̶$̶i̶n̶d̶e̶x̶}̶}̶.̶o̶v̶e̶r̶r̶i̶d̶e̶C̶o̶m̶m̶e̶n̶t̶s̶.̶$̶i̶n̶v̶a̶l̶i̶d̶
                            vm.forms['form'+$index].overrideComments.$invalid }" 
    ng-model="channel.mediaSummary.overrideComments" />

Для получения дополнительной информации см.

• Зачем смешивать интерполяция и выражения - плохая практика

Answer 2

Вы можете использовать $index свойство ng-repeat для уникального идентификатора. Также было бы проще иметь массив для всех форм, а затем обращаться к каждой форме, используя уникальный $index:

<form ng-repeat="channel in vm.data" novalidate id="form{{$index}}" name="vm.forms.form{{$index}}">

<input type="text" 
       name="overrideComments" 
       ng-required="true" 
       ng-class="{'has-error': vm.forms['form'+$index].overrideComments.$invalid 
       && vm.forms['form'+$index].$submitted}" 
       ng-model="overrideComments" />

<input class="btn btn-success p-2" 
       type="submit" 
       value="Add To Basket" 
       ng-click="vm.addToBasket($index)" />

В контроллере вы можете сохранить массив форм, передать индекс в функции, а затем проверьте правильность связанной формы:

vm.forms = {};
vm.addToBasket = function(i) {
   console.log(i);
   console.log(vm.forms[`form${i}`].$invalid);

}

Проверьте рабочую демонстрацию: DEMO