I am loading data in a form. I want to allow user to submit data only if the form is valid. Initially the form is pristine but invalid. Of the three fields user can edit, if he changes any one, the form is not pristine anymore which is okay but the form still remains invalid..although the values in other fields are valid. How can I get around putting a isPristine and IsValid condition around each field? Code is below. I have it inside repeater for edit/view. Removed the view part of the code since I think its not applicable in this case.
我正在以表单加载数据。我希望允许用户只在表单有效的情况下提交数据。最初，表单是原始的但无效的。在这三个字段中，用户可以编辑，如果他改变了任何一个，表单就不再是原始的了，这是可以的，但是表单仍然是无效的。虽然其他字段中的值是有效的。我怎样才能在每个领域都设置一个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"> </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 个解决方案
#1
2
You've got 1 form and you've got 3 fields.
有一个表单，有三个字段。
You could make the form accessible to your controller.
您可以让您的控制器访问该表单。
Normally, to do this I use the CONTROLLER AS syntax as follows:
通常，我使用控制器作为语法如下:
<ng-form name="vm.editCommentForm">
where vm is the controller alias.
其中vm是控制器别名。
(I'm sure its also possible to expose the form to the controller without CONTROLLER AS syntax but this is for you to figure out if interested in this approach).
(我确信它也可以将表单公开给控制器，而不使用控制器作为语法，但这是为了让您了解是否对这种方法感兴趣)。
Then in your controller you would do something like ...
然后在你的控制器中你会做一些类似…
vm.showFieldError = function(fieldName) {
var formField = vm.editCommentForm[fieldName];
return (formField.$invalid && formField.$dirty);
}
then you would reference this function in your view to determine whether to display the error message or not.
然后在视图中引用此函数，以确定是否显示错误消息。
#1
2
You've got 1 form and you've got 3 fields.
有一个表单，有三个字段。
You could make the form accessible to your controller.
您可以让您的控制器访问该表单。
Normally, to do this I use the CONTROLLER AS syntax as follows:
通常，我使用控制器作为语法如下:
<ng-form name="vm.editCommentForm">
where vm is the controller alias.
其中vm是控制器别名。
(I'm sure its also possible to expose the form to the controller without CONTROLLER AS syntax but this is for you to figure out if interested in this approach).
(我确信它也可以将表单公开给控制器，而不使用控制器作为语法，但这是为了让您了解是否对这种方法感兴趣)。
Then in your controller you would do something like ...
然后在你的控制器中你会做一些类似…
vm.showFieldError = function(fieldName) {
var formField = vm.editCommentForm[fieldName];
return (formField.$invalid && formField.$dirty);
}
then you would reference this function in your view to determine whether to display the error message or not.
然后在视图中引用此函数，以确定是否显示错误消息。