提交时的表单验证 - angularjs 1.5 - 当字段 $pristine 时 $invalid

Posted 2023-05-09

【中文标题】提交时的表单验证 - angularjs 1.5 - 当字段 $pristine 时 $invalid

【英文标题】：form validation on submit - angularjs 1.5 - $invalid when field $pristine

【发布时间】：2016-07-21 18:34:11

【问题描述】：

我正在加载表单中的数据。我只想在表单有效的情况下允许用户提交数据。最初的形式是原始的但无效。在用户可以编辑的三个字段中，如果他更改任何一个，表单不再是原始的，这没关系，但表单仍然无效..尽管其他字段中的值是有效的。如何绕过在每个字段周围放置 isPristine 和 IsValid 条件？代码如下。我在转发器内有它用于编辑/查看。删除了代码的视图部分，因为我认为它不适用于这种情况。

<table class="table">
            <tbody>
                <tr ng-repeat="comment in comments | orderBy: 'CreatedDate':true" ng-class-odd="'odd'" ng-class-even="'even'">
                    <td style="padding-left:1em;">

                        <ng-form name="editCommentForm">
                            <table border="0" class="form-group" ng-show="editComment.CommentID == comment.CommentID">
                                <tr>
                                    <td >Comment Type:</td>
                                    <td >
                                        <select name="cbCommentType" ng-model="comment.CommentTypeID" required>
                                            <option ng-selected="comment.CommentTypeID == option.CommentTypeID" ng-repeat="option in CommentTypes" value="option.CommentTypeID">option.Name</option>
                                        </select>
                                    </td>
                                    <td  class="errorMessage">
                                        <span ng-show="editCommentForm.cbCommentType.$error.required">Type is required.</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="3">&nbsp;</td>
                                </tr>
                                <tr>
                                    <td >Effective Date:</td>
                                    <td >
                                        <span class="input-group">
                                            <input type="text" name="txtEffectiveDate" class="form-control" uib-datepicker-popup ng-model="comment.EffectiveDate" is-open="editComment.popupOpened" ng-required="true" close-text="Close" />
                                            <span class="input-group-btn">
                                                <button type="button" class="btn btn-default" ng-click="openDatePicker(comment)"><i class="glyphicon glyphicon-calendar"></i></button>
                                            </span>
                                        </span>
                                    </td>
                                    <td  class="errorMessage">
                                        <p ng-show="editCommentForm.txtEffectiveDate.$error.required">Effective date is required.</p>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="3">&nbsp;</td>
                                </tr>
                                <tr>
                                    <td >Comment:</td>
                                    <td >
                                        <textarea name="txtComment" style="width:80%;resize:none;" name="txtComment" ng-model="comment.CommentText" placeholder="add comment here" ng-minlength="4" required> </textarea>
                                    </td>
                                    <td  class="errorMessage">
                                        <p ng-show="editCommentForm.txtComment.$error.required">Comment is required.</p>
                                        <p ng-show="editCommentForm.txtComment.$error.minlength">Comment is too short.</p>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="3" align="center">
                                        <input type="button" value="Cancel" ng-click="cancelObj(comment)" class="btn btn-default active btn-xs" />
                                        <input type="button" ng-disabled="editCommentForm.$pristine ? false : editCommentForm.$invalid" value="Save comment" ng-click="updateObj(comment)" class="btn btn-default active btn-xs" />
                                    </td>
                                </tr>
                            </table>
                        </ng-form>
                    </td>
                </tr>
            </tbody>
        </table>

【问题讨论】：

视情况而定，您可以将字段设置为有效，例如：editCommentForm.[form_field_name].$setValidity("required", false);

【参考方案1】：

您有 1 个表单和 3 个字段。

你可以让你的控制器可以访问表单。

通常，为此我使用 CONTROLLER AS 语法，如下所示：

<ng-form name="vm.editCommentForm">

其中 vm 是控制器别名。

（我确信它也可以在没有 CONTROLLER AS 语法的情况下将表单公开给控制器，但如果您对这种方法感兴趣，请自行判断）。

然后在你的控制器中你会做类似...

vm.showFieldError = function(fieldName) 
    var formField = vm.editCommentForm[fieldName];
    return (formField.$invalid && formField.$dirty);

然后你会在你的视图中引用这个函数来决定是否显示错误信息。

【讨论】：

将它放入控制器是我的想法，但我想知道我是否遗漏了任何明显的东西。我对此并不陌生，并希望在表单有效时启用/禁用提交按钮，以便更轻松地实现功能。我会尝试这个和其他建议，并在可行时在此处更新。

最终按照 halfer 和 danday74 的建议去做。我将代码用于验证表单是否已准备好提交到函数中并设置为 ng-disabled。谢谢大家！

非常感谢。我无法访问表单状态。添加vm 解决了这个问题。谢谢