自定义窗体验证不工作在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>