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?
Did you include the ngRequire module ?
<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.
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
