Question

您好我在尝试使用Angular支持进行表单验证但不起作用（但我没有HTML验证问题）。你能查一下我的代码吗？谢谢！

           <form class="form-horizontal" name="commentForm" ng-submit="submitComment()" novalidate>
                <div class="form-group" ng-class="{ 'has-error' : commentForm.newUser.$error.required && !commentForm.newUser.$pristine }"> 
                    <label for="Name" class="col-sm-2 control-label">Your name</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="Name" name="Name" placeholder="Enter Name" ng-model="newCommentCon.newUser" required>
                        <span ng-show="commentForm.newUser.$error.required && !commentForm.newUser.$pristine" class="help-block">Your Name is required.</span> 
                    </div>
                </div>
                <div class="form-group">  
                    <label for="Number of Stars" class="col-sm-2 control-label">Number of Stars</label>
                    <div class="col-sm-10">    
                        <label class="radio-inline">
                            <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
                        </label>
                        <label class="radio-inline">
                              <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="inlineRadioOptions" id="inlineRadio4" value="option4"> 4
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="inlineRadioOptions" id="inlineRadio5" value="option5"> 5
                        </label>
                    </div>


                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-primary" ng-disabled="!commentForm.$valid">Submit comment</button>
                    </div>
                </div>

            </div>
        </form>

Answer 1

完成此

您必须使用字段的ID而不是模型名称

＆＃13;

var jimApp = angular.module("mainApp",  []);

jimApp.controller('mainCtrl', function($scope){
});

＆＃13;

.has-error{
    border-color: rgba(229, 30, 23, 0.88);
    box-shadow: 0 0px 1px rgba(229, 103, 23, 0.075) inset, 0 0 2px rgba(199, 7, 0, 0.6);
    outline: 0 none;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="mainApp" ng-controller="mainCtrl">

<form class="form-horizontal" name="commentForm" ng-submit="submitComment()" novalidate>
                <div class="form-group" >
                    <label for="Name" class="col-sm-2 control-label">Your name</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="Name" name="Name" placeholder="Enter Name" ng-model="newCommentCon.newUser" required ng-class="{ 'has-error' : commentForm.Name.$error.required && !commentForm.Name.$pristine }">
                        <span ng-show="commentForm.Name.$error.required && !commentForm.Name.$pristine" class="help-block">Your Name is required.</span> 
                    </div>
                </div>
                <div class="form-group">  
                    <label for="Number of Stars" class="col-sm-2 control-label">Number of Stars</label>
                    <div class="col-sm-10">    
                        <label class="radio-inline">
                            <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
                        </label>
                        <label class="radio-inline">
                              <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="inlineRadioOptions" id="inlineRadio4" value="option4"> 4
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="inlineRadioOptions" id="inlineRadio5" value="option5"> 5
                        </label>
                    </div>


                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-primary" ng-disabled="!commentForm.$valid">Submit comment</button>
                    </div>
                </div>
</div>
            </form>
  </div>

＆＃13;

Answer 2

我刚刚更改了代码，无论你用什么来添加ng-class都应该使用form的name属性和输入类型的name属性。

例如：

  ng-class="{'has-error':commentForm.newUser. ..}"

这里commentForm将是表单名称的值，newUser是您尝试验证的输入类型的名称值。

希望这是个问题。已经改变了代码，试试这个

 <form class="form-horizontal" name="commentForm" ng-submit="submitComment()" novalidate>
            <div class="form-group" ng-class="{ 'has-error' : commentForm.newUser.$error.required && !commentForm.newUser.$pristine }"> 
                <label for="Name" class="col-sm-2 control-label">Your name</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="Name" name="newUser" placeholder="Enter Name" ng-model="newCommentCon.newUser" required>
                    <span ng-show="commentForm.newUser.$error.required && !commentForm.newUser.$pristine" class="help-block">Your Name is required.</span> 
                </div>
            </div>
            <div class="form-group">  
                <label for="Number of Stars" class="col-sm-2 control-label">Number of Stars</label>
                <div class="col-sm-10">    
                    <label class="radio-inline">
                        <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
                    </label>
                    <label class="radio-inline">
                          <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="inlineRadioOptions" id="inlineRadio4" value="option4"> 4
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="inlineRadioOptions" id="inlineRadio5" value="option5"> 5
                    </label>
                </div>


            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-primary" ng-disabled="!commentForm.$valid">Submit comment</button>
                </div>
            </div>

        </div>
    </form>

对表单验证的角度支持不起作用

2 个答案: