Динамически заданное имя формы в ng-сообщениях

Question

В нескольких формах в моем приложении я пытаюсь использовать ту же директиву, которая является полем ввода электронной почты, заполненным проверкой (оно отправляет его значение из списка недавно использованных писем, но это не относящихся к этому вопросу). Поскольку форма, в которой используется директива, отличается в зависимости от того, где я ее использую, атрибут ng-messages должен быть динамически визуализирован.

Мне удалось получить ng-сообщения, чтобы динамически настроить себя, но он работает не так, как ожидалось. Вот код:

form.html

<form name="joinForm"> 
    <rt-recents-menu ng-model="vm.roomName"/> 
</form> 

directive.coffee

recents = angular.module 'rtRecents', ['ionic', 'ngMessages'] 
    .factory('rtRecentsService', require './recentsService') 
    .directive('rtRecentsMenu', (rtRecentsService, $ionicActionSheet) -> 
    restrict: 'E' 
    template: require './recentsMenu.html' 
    scope: 
     ngModel: '=?' 
    require: ['?ngModel', '^form'] 
    transclude: false 
    replace: false 
    link: (scope, element, attrs, ctrls) -> 
     ngModel = ctrls[0] 
     formCtrl = ctrls[1] 
     scope.formName = formCtrl.$name 

module.exports = recents.name 

directive.html

<div class="email-line"> 
     <input type="email" 
     name="roomName" 
     required 
     ng-model="ngModel" 
     ng-keydown="onKeyDown()"/> 
     <div id="email-error-messages" ng-messages="{{formName}}.roomName.$error" multiple role="alert"> 
     <div ng-message="required" class="warn" translate>VALIDATION.EMAIL_REQUIRED_ERROR</div> 
     <div ng-message="email" class="warn" translate>VALIDATION.EMAIL_INVALID_ERROR</div> 
     </div> 
</div> 

Answer 1

В моем случае, у меня есть, который отображает каждый из возвращенные строки из запроса db. И каждая строка имела свою форму внутри этого цикла повтора.

я столкнулся с двумя проблемами:

1. Ошибки ngMessage не показывать правильно, потому что они, похоже, не быть привязанным к правому полям/форме.
2. Я не мог отключить кнопку «сохранить» для каждой формы. $ Invalid, похоже, не работает.

Вот что работает (обрезанные декораторы, и т.д., так что вы видите только основные моменты):

<div ng-repeat="row in rows | orderBy: 'sortBy'" 
    ng-init="formName = 'siteEdit' + row.id"> 
    <form name="{{formName}}" ng-submit="view.startSave(row.id)"> 
     <!-- I have "control" buttons at the top of my form to save, cancel, etc. here are the two related to saving --> 
     <span class="glyphicon glyphicon-save pull-right q-palette-color-2" ng-disabled="view.isPageBusy()" 
      ng-show="! this[formName].$invalid" ng-click="view.startSave(row.id)" title="Save"/> 
     <span class="glyphicon glyphicon-ban-circle pull-right q-palette-accent-2" 
      ng-show="this[formName].$invalid" style="padding-left:10px;cursor: pointer; cursor: hand;" data-toggle="tooltip" title="Correct Errors To Save"/> 
     <label for="siteName{{row.id}}">&nbsp;&nbsp;Name:</label> 
      <input id="siteName{{row.id}}" 
       class="form-control input" 
       type="text" 
       placeholder="name" 
       ng-disabled="view.isPageBusy()" 
       ng-model="row.name" 
       name="name" 
       required /> 
      <div ng-messages="formName.name.$error"> 
       <div ng-message="required">This field is required</div> 
      </div> 
     ..... 
    </form> 
</div> 

Ключевые моменты:

• нг-INIT в нг-повтора Строит FORMNAME переменная.
• форма проверки для сохранения/и т.д. использует это [FORMNAME] $ недействительна проверка
• поле упоминается в формате FORMNAME .. $ ошибка

Что-то отметить:.

Я не мог» t получить ng-disable, чтобы фактически отключить «кнопку» на основании того, что это недействительно или нет (ng-click выполнен независимо от того, что, может быть, потому, что я не использовал <button>, но использовал <span> w/glyphicon). Поэтому я решил, чтобы один отображался, когда вы можете сохранить, а другой отображается, когда вы не можете. Работает лучше, так как человек может визуально видеть, что они не могут спасти, и если они наведут верх, они увидят, что им нужно сначала скорректировать форму.