ng-messagesに動的にフォーム名を設定しました

Question

私のアプリでは、複数のフォームの中で、検証の完了したメール入力フィールドと同じディレクティブを使用しようとしています（最近使用された電子メールのリストから値を取得しますが、この質問には関係しません）。ディレクティブが使用される形式は、使用する場所によって異なりますので、ng-messages属性を動的にレンダリングする必要があります。

ダイナミックに設定するためにng-messagesを取得できましたが、期待通りに機能しません。ここでは、コードです：

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クエリから取得されます。また、各行はこの繰り返しループ内に独自のフォームを持っていました。

私は2つの問題に遭遇した：

1. 彼らは右のフィールド/フォームに縛られていないようでしたので、ngMessageエラーが正しく表示されませんでした。
2. フォームごとに「保存」ボタンを無効にできませんでした。 $無効は機能していないようです。

ここで（あなたが唯一の基本的なポイントを見てトリミングデコレータなど）をどのような作品です：

<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> 

キーポイント：NG-繰り返しで

• NG-initはformNameフォームを構築します変数。 。

  を私はcouldn」：保存のため

• フォームの検証は、/ etcには、この[フォーム名] $無効
• フィールドの検証が注意することはformNameフォーム.. $エラー

何かの形式で参照されている使用しています無効になっているかどうかに基づいて「ボタン」を実際に無効にするには、ng-disableを取得します（何も関係なく実行されたng-clickは<button>を使用しなかったが、<span> w/​​を使用した）。だから私はあなたが保存することができますときに表示され、もう一つは表示することを選択しました。人が視覚的に保存することができないことを視覚的に見ることができるので、この方法でよりうまく動作し、最初にフォームを修正する必要があることがわかります。