Custom Form Validation Not working in angularjs - angularjs

Question

I want to validate all the fields in this form by angular, but it is not working. I am new to angular and cant find what the problem is. None of the field in this form is being validated
<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

I think you only missed required in input element.
<input type="text" class="form-control" name="name" id="name" placeholder="Enter Your Name" ng-model="dishComment.author" required>
I just added required for one input element and its working.
Please check jsfiddle

Answer 2

I am using input fields, something like below structure. as Nitish said, you must need to write required in input element.
AppForm is a form name.
<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>