AngularJS中未显示必需的错误消息

Question

I am having trouble with displaying required error messages in one of my pages.

HTML :

<div ng-form="editReservationForm">
    <form id="edit-profile" novalidate name="editReservationForm" autocomplete="off" class="form-horizontal">
        <fieldset>
            <div class="control-group">
                <label class="control-label" for="reservation.employee.firstName">First Name<sup>*</sup></label>
                <div class="controls">
                    <input class="span4" name="reservation.employee.firstName" placeholder="First Name" ng-model="reservation.employee.firstName" disabled />
                </div> <!-- /controls -->
            </div> <!-- /control-group -->


            <div class="control-group">
                <label class="control-label" for="reservation.employee.lastName">Last Name<sup>*</sup></label>
                <div class="controls">
                    <input class="span4" name="reservation.employee.lastName" placeholder="Last Name" ng-model="reservation.employee.lastName" disabled />
                </div> <!-- /controls -->
            </div> 

            <div class="control-group">
                <label class="control-label" for="reservation.reservedFrom">Reserved From<sup>*</sup></label>
                <div class="controls input-group date" data-provide="datepicker">
                    <input class="form-control" type="text" name="startDate" core-date-picker ng-model="reservation.reservedFrom" required>
                    <div class="input-group-addon">
                        <span class="glyphicon glyphicon-th"></span>
                    </div>

                    <span style="color:red">{{errMessageFrom}}</span>

                </div> <!-- /controls -->
            </div> <!-- /control-group -->
            <div class="control-group">
                <label class="control-label" for="reservation.reservedTill">Reserved Till<sup>*</sup></label>
                <div class="controls input-group date" data-provide="datepicker">
                    <!--<input type="text" style="width:150px" class="span4" name="reservedTill" placeholder="Reserved Till" data-ng-model="reservation.reservedTill"
                           validator="required" required-error-message="Date is required" valid-method="watch" id="endDate" ng-change='checkErr()' />-->
                    <input class="form-control" type="text" name="EndDate" core-date-picker ng-model="reservation.reservedTill"  ng-change='checkErr()' id="endDate1" required>
                    <div class="input-group-addon">
                        <span class="glyphicon glyphicon-th"></span>
                    </div>
                    <span  style="color:red">{{errMessageTo}}</span>

                </div> <!-- /controls -->
            </div> <!-- /control-group -->



            <!--DATE PICKER-->
            <div class="control-group">
                <label class="control-label" for="reservation.account.name" >Account Name<sup>*</sup></label>
                <div class="controls">
                    <select ng-model="reservation.account.id" required>
                        <option ng-repeat="p in accounts"  value="{{p.id}}" required>{{p.name}}</option>
                    </select>
                </div> <!-- /controls -->
            </div> <!-- /control-group -->

            <!--<div class="control-group">
                <label class="control-label" for="reservation.poc.name">POC Name</label>
                <div class="controls">
                    <select ng-model="reservation.poc.id">
                        <option ng-repeat="p in pocs" value="{{p.id}}">{{p.name}}</option>
                    </select>
                </div> <!-- /controls -->
            <!--</div>--> <!-- /control-group -->
            <div class="control-group">
                <label class="control-label" for="reservation.remark" >Remarks : <sup>*</sup></label>
                <div class="controls">
                    <input type="text" required id="remarksText" class="span4" name="reservation.remark" placeholder="Enter your remarks here" ng-model="reservation.remark" />
                </div> <!-- /controls -->
            </div> <!-- /control-group -->

            <div class="form-actions">
                <button type="button" class="btn btn-primary" validation-submit="editReservationForm" ng-click="updateReservation()">Save</button>
                <button ng-click="cancel()" class="btn">Cancel</button>
            </div> <!-- /form-actions -->
        </fieldset>
    </form>

</div>

I have added the required tag along with all input fields but upon click of 'Save' button, the error messages that show 'This field is required' is not shown. The function is not getting called though.

I need help in finding the cause of this issue.

Answer 1

Keep the novalidate in the <form> tag.

Try changing required to ng-required="true" .

ng-required works with ng-model . So make sure that ng-model exists in your input tag. (additional info)

Try adding

<span style="color:red" ng-show="editReservationForm.inputFieldName.$invalid && editReservationForm.inputFieldName.$touched">
                Required field.
</span>

where inputFieldName is the respective name attribute.

This adds for better effect although you'll need to import angular-animate.min.js and add it as a dependency too.