Javascript 提交时的表单验证-angularjs 1.5-$字段为$pristine时无效

Javascript 提交时的表单验证-angularjs 1.5-$字段为$pristine时无效,javascript,jquery,angularjs,forms,validation,Javascript,Jquery,Angularjs,Forms,Validation,我正在表单中加载数据。我希望仅当表单有效时才允许用户提交数据。最初的形式是原始的,但无效。在用户可以编辑的三个字段中,如果他更改了任何一个,则表单不再是原始的,这是可以的,但表单仍然无效..尽管其他字段中的值是有效的。如何在每个字段周围放置isPristine和IsValid条件?代码如下。我把它放在中继器里,用于编辑/查看。删除了代码的视图部分,因为我认为它在这种情况下不适用 <table class="table"> <tbody>

我正在表单中加载数据。我希望仅当表单有效时才允许用户提交数据。最初的形式是原始的,但无效。在用户可以编辑的三个字段中,如果他更改了任何一个,则表单不再是原始的,这是可以的,但表单仍然无效..尽管其他字段中的值是有效的。如何在每个字段周围放置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 width="25%">Comment Type:</td>
                                    <td width="50%">
                                        <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 width="25%" class="errorMessage">
                                        <span ng-show="editCommentForm.cbCommentType.$error.required">Type is required.</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="3">&nbsp;</td>
                                </tr>
                                <tr>
                                    <td width="25%">Effective Date:</td>
                                    <td width="50%">
                                        <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 width="25%" 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 width="25%">Comment:</td>
                                    <td width="50%">
                                        <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 width="25%" 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>

注释类型:
{{option.Name}
类型是必需的。
生效日期:
生效日期是必需的

评论: 需要注释

注释太短


您有1个表单和3个字段

您可以使您的控制器可以访问该表单

通常,要做到这一点,我使用控制器的语法如下:

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

然后,您可以在视图中引用此函数来确定是否显示错误消息。

根据具体情况,您可以将字段设置为有效字段,如:
editCommentForm.[form\u field\u name]。$setValidity(“必需”,false)将它放入控制器是我一直在想的,但我想知道我是否遗漏了任何明显的东西。我是新手,希望在表单有效时启用/禁用submit按钮,使功能更简单。我会尝试一下这个和其他的建议,当它起作用的时候,我会在这里进行更新。最终按照halfer和danday74的建议去做。我将代码放在函数中验证表单是否准备好提交,并将其设置为ng disabled。谢谢大家!非常感谢你。我无法访问表单状态。添加
vm
解决了这个问题。谢谢
vm.showFieldError = function(fieldName) {
    var formField = vm.editCommentForm[fieldName];
    return (formField.$invalid && formField.$dirty);
}