Max DG Max DG - 5 months ago 12
AngularJS Question

Angular support for form validation not working

Hi there I'm trying to use Angular support for form validation but is not working (but I don't have problems with HTML validation). Can you check my code? Thanks!

<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

Go through this

You have to use id of the field instead of model name

var jimApp = angular.module("mainApp",  []);

jimApp.controller('mainCtrl', function($scope){
});
.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;
  }
<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>

Workking screen shot