验证Angular JS(1.x)中的分页表单 [英] Validating paginated forms in Angular JS (1.x)

问题描述

我有一个带输入字段的表格，使用的是角形表格.用户可以添加和删除行.每个单元格可以是输入类型的文本，数字日期等.如果表太大，则表格变慢.解决此问题的一种方法是对表进行分页.

I have a form in angular using tables with input field. Users can add and delete rows. Each cell can be of input type text,number date etc. If the table is too big the form becomes slow. One way to solve this is to paginate the table.

不幸的是，对表进行分页是一个问题，因为我在输入字段上进行了自定义验证，并且如果任何页面中的任何字段无效，则不应提交表单.例如用户可以填写第一页并提交表单，而无需填写第二页.Angular必须为第二页中的字段抛出错误.目前，我正在使用form指令的角度实现来管理错误.角形窗体仅在当前页面中显示字段，而在第二页中不显示.

Unfortunately paginating the table is a problem because I have custom validations on the input fields and the form should not submit if any of the fields in any page are not valid. For e.g. The user may fill the first page and submits the form without filling the second page. Angular must throw an error for the fields in the second page. Currently I am using angular implementation of form directive to manage errors. Angular forms only show the fields in the current page and not in the second page.

看看这个 plunkr .表单格式如下.

Take a look at this plunkr . The form is of the below format.

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

在表中，文本字段具有必需的验证.在第一页中，该表格有效，因为所有文本字段均已填写.但是在第二页中，没有填写一个文本字段.因此，该表格实际上应该是无效的.但是只有当我转到下一页时，它才变得无效.

In the table, the text field has a required validation. In the first page, the form is valid as all the text fields are filled. But in the second page, one text field is not filled. So the form should actually be invalid. But it becomes invalid only if I go to the next page.

我该如何解决这个问题?

How do I solve this problem ?

推荐答案

正如@Stepan Kasyanenko所说，如果您从DOM中删除该元素(limitTo这样做)，验证将无效.如果将元素放在DOM中但将其隐藏，则显示的错误消息将不会很有用，因为不会向用户显示输入.

As @Stepan Kasyanenko said, if you remove the element from DOM (limitTo does this) validation will not work. If you put the elements in DOM but hide them, then the error messages that are shown will not be very useful as the inputs are not shown to user.

因此，您可以为每个页面设置一个表单.如果对当前页面的验证正常，则提交按钮将转到下一页.最后一页上的提交"按钮会将表单保存到服务器.如果您要保存所有提交的信息，则只能将当前页面保存在提交到服务器上.

So, you can set a form for each page. The submit button will go to next page if validation for the current page is OK. The submit button on last page will save the form to server. If you would like to save all submitted information, then you can save only the current page on submits to server.

这篇关于验证Angular JS(1.x)中的分页表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！