AngularJSで必要なエラーメッセージが表示されない

Question

私のページの1つに必要なエラーメッセージを表示するのに問題があります。

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

<form>タグにはnovalidateを入れてください。

requiredをng-required="true"に変更してみてください。

ng-requiredはng-modelで動作します。入力タグにng-modelが存在することを確認してください。 （追加情報）inputFieldNameは、それぞれのname属性です

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

を追加

してみてください。

angular-animate.min.jsをインポートしてそれを依存関係として追加する必要がありますが、これにより効果が向上します。