Question

我想通过angular验证此表单中的所有字段，但它不起作用。我是棱角分明的新人，无法找到问题所在。此表单中的任何字段均未经过验证

<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所说，你必须在输入元素中写 required 。

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>

自定义表单验证不适用于angularjs

2 个答案: