Question

我无法在我的某个页面中显示所需的错误消息。

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>

我已添加required标记以及所有输入字段，但点击“保存”按钮后，系统不会显示显示“此字段为必填项”的错误消息。但是这个函数没有被调用。

我需要帮助才能找到问题的原因。

Answer 1

将novalidate保留在<form>标记中。

尝试将required更改为ng-required="true"。

ng-required适用于ng-model。因此，请确保输入标记中存在ng-model。（附加信息）

尝试添加

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

其中inputFieldName是相应的name属性。

虽然您需要导入angular-animate.min.js并将其添加为依赖项，但这会增加效果。

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

1 个答案: