Error validation not working in AngularJS

Question

I am doing error validation in Angular as follows.

<select ng-model = "$parent.color" class = "form-control"
    ng-options = "color as color for color in $parent.colors" required>
    <option value="">Choose an option</option> 
</select>

<span ng-show="serviceForm.$parent.color.$error.required"> My custom error message </span>

The error validation message never shows up. How to fix this?

Answer 1

Did you include the ngRequire module ?

ngRequire

<script>
angular.module('ngRequiredExample', [])
.controller('ExampleController', ['$scope', function($scope) {
  $scope.required = true;
}]);
</script>
<div ng-controller="ExampleController">
 <form name="form">
 <label for="required">Toggle required: </label>
 <input type="checkbox" ng-model="required" id="required" />
 <br>
 <label for="input">This input must be filled if `required` is true:</label>
 <input type="text" ng-model="model" id="input" name="input" ng-required="required" /> <br>
 <hr>
 required error set? = <code>{{form.input.$error.required}}</code><br>
 model = <code>{{model}}</code>

Try this if it works.

Answer 2

Your code can be like to this to work properly.

<form name="form1">
   <select name="select" ng-model = "$parent.color" class = "form-control"
       ng-options = "color as color for color in $parent.colors" required>
       <option value="">Choose an option</option>    
   </select>
   <span ng-show="form1.select.$error.required"> My custom error message </span>
</form>

You are not flowing FormController. View this link