I'm using typeahead's UI Bootstrap component and I want to force the selection to validate my form.
Is it possible to configure it to set the input invalid when typeahead-editable is set to false and the user enters a "bad" value or I should write a directive for this (but how)?
The typeahead directive from http://angular-ui.github.io/bootstrap/ has already support for limiting inputs to matches (in other words, people can bind to model only values available as matches in the typeahead popup). You can do this by simply setting typeahead-editable='false' attribute.
Please note that setting this attribute to false will not prevent people from typing-in invalid values. It will just make sure that a corresponding input is marked as invalid and a provided value is not bound to the model.
Answer on the behalf of OP:
var formValidatorsModule = angular.module('app.validator.formValidator', []);
formValidatorsModule.directive('typeaheadForceSelection', function() {
return {
require : 'ngModel',
link : function(scope, elm, attrs, ctrl) {
ctrl.$parsers.push(function(viewValue) {
if (viewValue == undefined) {
ctrl.$setValidity('typeaheadForceSelection', false);
} else {
ctrl.$setValidity('typeaheadForceSelection', true);
}
return viewValue;
});
}
};
});