在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并将其作为依赖关系添加，但这样可以获得更好的效果。