我正在表单中加载数据。我希望仅当表单有效时才允许用户提交数据。最初,该表格是原始的,但无效。在用户可以编辑的三个字段中,如果他更改任何一个字段,则表单不再是原始的,这没关系,但表单仍然无效......尽管其他字段中的值是有效的。如何避免在每个字段周围放置 isPristine 和 IsValid 条件?代码如下。我把它放在中继器内用于编辑/查看。删除了代码的 View 部分,因为我认为它不适用于这种情况。
<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"> </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"> </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>
最佳答案
您有 1 个表单和 3 个字段。
您可以使表单可供您的 Controller 访问。
通常,为此我使用 CONTROLLER AS 语法,如下所示:
<ng-form name="vm.editCommentForm">
其中 vm 是 Controller 别名。
(我确信也可以在没有 CONTROLLER AS 语法的情况下将表单公开给 Controller ,但这可以让您弄清楚是否对这种方法感兴趣)。
然后在你的 Controller 中你会做类似的事情......
vm.showFieldError = function(fieldName) {
var formField = vm.editCommentForm[fieldName];
return (formField.$invalid && formField.$dirty);
}
然后你可以在你的 View 中引用这个函数来决定是否显示错误消息。
关于javascript - 提交时的表单验证 - angularjs 1.5 - 当字段 $pristine 时 $invalid,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36365028/