自定義窗體驗證不工作在angularjs

Question

我想通過角度驗證此窗體中的所有字段，但它不工作。我是新來的角，找不到問題所在。現場沒有這種形式正在驗證

<form class="form-horizontal" role="form" name="commentForm" ng-submit="submitComment()" novalidate> 
       <div class="form-group" ng-class="{'has-error': commentForm.name.$error.required && !commentForm.name.$pristine}"> 
        <label for="name" class="col-xs-2">Your Name</label> 
        <div class="col-xs-10"> 
         <input type="text" class="form-control" name="name" id="name" placeholder="Enter Your Name" ng-model="dishComment.author"> 
         <span class="help-block" ng-show="commentForm.name.$error.required && !commentForm.name.$pristine">Your Name is Required</span> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label for="rating" class="col-xs-2">Number of Stars</label> 
        <div class="col-xs-10"> 
         <label class="radio-inline"> 
          <input type="radio" name="rating" id="rating" value="1" ng-model="dishComment.rating"> 1 
         </label> 
         <label class="radio-inline"> 
          <input type="radio" name="rating" id="rating" value="2" ng-model="dishComment.rating"> 2 
         </label> 
         <label class="radio-inline"> 
          <input type="radio" name="rating" id="rating" value="3" ng-model="dishComment.rating"> 3 
         </label> 
         <label class="radio-inline"> 
          <input type="radio" name="rating" id="rating" value="4" ng-model="dishComment.rating"> 4 
         </label> 
         <label class="radio-inline"> 
          <input type="radio" name="rating" id="rating" value="5" ng-model="dishComment.rating"> 5 
         </label> 
        </div> 
       </div> 
       <div class="form-group" class="{'has-error': commentForm.comments.$error.required && !commentForm.comments.$pristine}"> 
        <label for="comments" class="col-xs-2">Your comments</label> 
        <div class="col-xs-10"> 
         <textarea class="form-control" id="comments" name="comments" rows="12" ng-model="dishComment.comment"></textarea> 
         <span class="help-block" ng-show="commentForm.comments.$error.required && !commentForm.comments.$pristine">Please Write a comment</span> 
        </div> 
       </div> 
       <div class="form-group"> 
        <div class="col-sm-offset-2 col-sm-10"> 
         <button type="submit" class="btn btn-primary" ng-disabled="commentForm.$invalid">Submit Comment</button> 
        </div> 
       </div>      
      </form> 

Answer 1

我想你只錯過輸入元件所需。

<input type="text" class="form-control" name="name" id="name" placeholder="Enter Your Name" ng-model="dishComment.author" required> 

我剛剛添加了一個輸入元素及其工作所需的。

請檢查jsfiddle

Answer 2

我使用的輸入域，類似下面的結構。正如Nitish所說，您必須在輸入元素中編寫所需的。

AppForm是表單名稱。

<md-input-container flex="50" flex-gt-xs="33" md-is-error="AppForm.txtApplicationUrl.$invalid && (AppForm.$submitted || AppForm.txtApplicationUrl.$dirty)"> 
    <label for="input_0">Your label</label> 
    <input type="text" ng-model="applicationDetails.Applicationurl" name="txtApplicationUrl" tabindex="0" id="txtApplicationUrl" aria-invalid="false" required><div class="md-errors-spacer"></div> 
    <div ng-messages="AppForm.txtApplicationUrl.$error" ng-if="AppForm.$submitted || AppForm.txtApplicationUrl.$touched"> 
    <div ng-message="required">Custom Message</div> 
    </div> 
</md-input-container>