当typeahead-editable为false时,设置输入无效

时间:2013-08-08 14:34:11

标签: angularjs angular-ui-bootstrap

我正在使用typeahead的UI Bootstrap组件,我想强制选择来验证我的表单。 当'typeahead-editable'设置为false并且用户输入“错误”值或者我应该为此编写指令(但如何?)时,是否可以将其配置为设置输入无效?

由于

更新2013-08-09 9:54: 您如何看待以下解决方案:

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;
            });
        }
    };
});

2 个答案:

答案 0 :(得分:17)

来自http://angular-ui.github.io/bootstrap/typeahead指令已经支持限制匹配的输入(换句话说,人们可以绑定到只有模型的值,可以作为预先输入弹出窗口中的匹配项)。您只需设置typeahead-editable='false'属性即可完成此操作。

请注意,将此属性设置为false 会阻止用户输入无效值。它只会确保相应的输入被标记为无效,并且提供的值不会绑定到模型。

答案 1 :(得分:-1)

代表 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;
            });
        }
    };
});