form validation on submit - angularjs 1.5 - $invalid when field $pristine

Question

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.

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

Answer 1

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.

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