동적으로 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 쿼리에서 반환 된 행 각 행은이 반복 루프 내에서 고유 한 형식을가집니다. 그들이 올바른 필드/형식에 묶여 것 같지 않았기 때문에

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> 
   

   요점 :

   • 가 NG 반복에서 NG-초기화가는 FormName를 구축

여기 (트리밍 장식 등 만 필수 포인트를 볼 수 있도록)를 작동 무엇 변하기 쉬운. .

을 내가 모를 수가 : 저장을위한

양식 유효성 검사는/등이 [는 FormName] $ 무효

필드의 유효성 검사가 주목는 FormName .. $ 오류

뭔가의 형식으로 참조 사용 t는 유효하지 않은지 여부에 따라 실제로 "버튼"을 비활성화하는 ng-disable을 얻습니다. 어쨌든 ng-click은 <button>을 사용하지 않았으므로 <span> (glyphicon)을 사용했기 때문에 실행되었습니다. 그래서 저장할 수있을 때 하나를 표시하도록하고, 그렇지 않을 때는 다른 하나를 표시하도록 선택했습니다. 사람이 시각적으로 저장할 수없는 것을 볼 수 있으므로이 방법을 사용하면 더 효과적이며, 마우스를 올리면 양식을 먼저 수정해야합니다.