запретить пользователю вводить новое имя и разрешать выбирать только из существующего списка

Question

Я работаю над функцией автозаполнения текстового поля angularjs.Я хочу, чтобы пользователь только выбирал имя из существующего списка автозаполнения вместо ввода нового имени.Например, когда пользователь вводит 'Al' в списке автозаполнения отображается соответствующий список, и пользователь может выбрать одно имя из существующего списка вместо ввода нового имени. Как запретить пользователю отправлять новое имя, которого нет в существующем списке.

Демонстрация: http://plnkr.co/edit/AdmtP1b6K9kQorMHmt7t?p=preview

Пример кода:

    $scope.countryList = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua & Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia & Herzegovina","Botswana","Brazil","British Virgin Islands","Brunei"];
$scope.validateField = function(){
  alert("Clicked on submit , validte field");
}
    $scope.complete=function(string){

        var output=[];
        angular.forEach($scope.countryList,function(country){
            if(country.toLowerCase().indexOf(string.toLowerCase())>=0){
                output.push(country);
            }
        });
        $scope.filterCountry=output;
    }
    $scope.fillTextbox=function(string){
        $scope.country=string;
        $scope.filterCountry=null;
    } 

Любые входные данные будут полезны.

Answer 1

Вы можете отключить кнопку отправки, а также выделить границу поля ввода красным, указав пользователю выбрать имя из выпадающего списка.

Сначала вам нужно обновить функцию complete().Используйте оператор else if, который проверит, является ли значение из списка или нет, если нет, то вы можете реализовать желаемую логику в этом операторе else if.

Этот метод гибкий и простой в настройке.сообщения об ошибках.Вы можете показать и скрыть div с сообщением об ошибке или применить css style к полю ввода, используя ng-style или ng-class.Прямо сейчас я покажу вам, как отключить или включить кнопку.Вот обновленный фрагмент кода:

 $scope.complete = function(string) {

    var output = [];
    angular.forEach($scope.countryList, function(country) {
      if (country.toLowerCase().indexOf(string.toLowerCase()) >= 0) {
        output.push(country);
        $scope.enableDisable = false;
      } else if (country.toLowerCase().indexOf(string.toLowerCase()) < 0) {
        $scope.enableDisable = true;
      }
    });

    $scope.filterCountry = output;
  }

И в разделе html вам просто нужно добавить атрибут ng-disabled и установить его значение.

 <input type="submit" value="submit" ng-disabled="enableDisable" ng-click="validateField()">

Итак, вы можете сделатьвсе, что вы хотите в этом операторе else if, чтобы получить сообщение об ошибке желания.

Answer 2

Взгляните на этот планкр.

Вы можете проверить достоверность ввода, используя что-то, как показано ниже, и контролировать значение, используя ng-change

    $scope.checkInput = function(){
        $scope.validInput = $scope.countryList.indexOf($scope.country) > -1;
    }