在AngularJS中未顯示所需的錯誤消息

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並將其作爲依賴關係添加，但這樣可以獲得更好的效果。