I have an HTML form with a select menu:
<form name="form">
<select name="gender" ng-model="model" ng-required="true"
ng-model-options="{ updateOn: 'mousedown blur'}">
<option value="" disabled>--Select--</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</form>
<form-error element="gender"><p>Please select Gender</p></form-error>
I am implementing this using angularJS javascript in a custom directive
.directive('formError', function() {
'use strict';
return {
require: ['^form'],
restrict: 'E',
templateUrl: '/partials/form-fields/validations/error.html',
scope: {},
transclude: true,
replace: true,
link: function($scope, $element, $attr, form) {
var element = $attr.element;
$scope.form = form[0];
$scope.$watch('form.' + element + '.$viewValue', function(newVal, oldVal){
$scope.$dirty = $scope.form[element].$dirty;
$scope.$valid = $scope.form[element].$valid;
$scope.$invalid = $scope.form[element].$invalid;
$scope.$value = newVal;
console.log($scope.form.gender.$invalid);
}, true);
$scope.$watch('form.$submitted', function(newVal, oldVal){
$scope.$submitted = newVal;
}, true);
}
});
The directive above relates to the following HTML snippet
<div class="input__error"
ng-if="($dirty && $invalid && $value !== '') || ($submitted && $invalid)"
ng-transclude></div>
When typing in any text input field, the $invalid variable switches from true to false as expected. However, when selecting "Male" from the dropdown menu, it still remains true for $invalid. Only when selecting "Female", $invalid becomes false.
Essentially, I want the error message to disappear when "Male" is selected.
Any insight on why this might be happening?