Angular JS (1.x)에서 페이지 매김 형식 유효성 검사

Question

입력 필드가있는 테이블을 사용하여 각도가있는 양식이 있습니다. 사용자는 행을 추가 및 삭제할 수 있습니다. 각 셀은 입력 유형 텍스트, 숫자 날짜 등이 될 수 있습니다. 테이블이 너무 크면 양식이 느리게됩니다. 이 문제를 해결할 수있는 한 가지 방법은 테이블을 매김하는 것입니다.

불행히도 페이지 입력란에 대한 사용자 지정 유효성 검사가 있고 페이지의 필드 중 하나라도 유효하지 않은 경우 양식이 제출되어서는 안되기 때문에 테이블을 페이지 매김하는 것이 문제가됩니다. 예 : 사용자는 첫 번째 페이지를 채우고 두 번째 페이지를 채우지 않고 양식을 제출할 수 있습니다. Angular는 두 번째 페이지의 필드에 오류를 던져야합니다. 현재 오류를 관리하기 위해 양식 지시문의 각 구현을 사용하고 있습니다. 각형은 현재 페이지의 필드 만 표시하고 두 번째 페이지는 표시하지 않습니다.

plunkr을보세요. 양식의 형식은 다음과 같습니다.

<form name="tableForm" novalidate> 
 
     {{tableForm.$valid}} 
 
     <button ng-click="previousPage()">Previous</button> 
 
     <button ng-click="nextPage()">Next</button> 
 
    <table> 
 
     <thead> 
 
     <tr> 
 
      <td>Text</td> 
 
      <td>Date</td> 
 
      <td>Textarea</td> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr ng-repeat="item in TableData | limitTo :5:offset"> 
 
      <td> 
 
      <input name="Text_{{$index+offset}}" type="text" ng-model="item.Text" ng-required="true" /> 
 
      <div ng-messages="tableForm.Text_{{$index+offset}}.$error" ng-messages-include="error-messages" class="errorMsg"> 
 
         <div ng-message="required" class="error_text">This field is required</div> 
 
        </div> 
 
      </td> 
 
      <td> 
 
      <input name="Date{{$index+offset}}" type="date" ng-model="item.Date" /> 
 
      </td> 
 
      <td> 
 
      <textarea name="Textarea_{{$index+offset}}" ng-model="item.Textarea" ></textarea> 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </form>

표에서

는, 텍스트 필드에 필요한 검증 있습니다. 첫 번째 페이지에서 양식은 모든 텍스트 필드가 채워지는대로 유효합니다. 그러나 두 번째 페이지에서 한 텍스트 필드는 채워지지 않습니다. 따라서 양식은 실제로 유효하지 않아야합니다. 하지만 다음 페이지로 이동해야만 유효합니다.

어떻게이 문제를 해결할 수 있습니까?

Answer 1

@Stepan Kasyanenko가 말했듯이 DOM에서 요소를 제거하면 (limitTo가 수행함) 유효성 검사가 작동하지 않습니다. 요소를 DOM에 넣었지만 숨기면 표시되는 오류 메시지는 입력이 사용자에게 표시되지 않으므로별로 유용하지 않습니다.

그래서 각 페이지에 대해 양식을 설정할 수 있습니다. 현재 페이지에 대한 유효성 검사가 OK이면 제출 단추가 다음 페이지로 이동합니다. 마지막 페이지의 제출 버튼은 양식을 서버에 저장합니다. 제출 된 모든 정보를 저장하려면 서버에 제출할 때 현재 페이지 만 저장할 수 있습니다.