Angular ограничение на отсутствие пробелов в текстовом поле

Ответ 1

<input ng-model="field" ng-trim="false" ng-change="field = field.split(' ').join('')" type="text">

Обновление: Чтобы улучшить качество кода, вы можете создать настраиваемую директиву. Но не забывайте, что ваша директива должна предотвращать ввод не только с клавиатуры, но и с вставки.

<input type="text" ng-trim="false" ng-model="myValue" restrict-field="myValue">

Здесь важно добавить атрибут ng-trim = "false", чтобы отключить обрезку ввода.

angular
  .module('app')
  .directive('restrictField', function () {
    return {
        restrict: 'AE',
        scope: {
            restrictField: '='
        },
        link: function (scope) {
          // this will match spaces, tabs, line feeds etc
          // you can change this regex as you want
          var regex = /\s/g;

          scope.$watch('restrictField', function (newValue, oldValue) {
              if (newValue != oldValue && regex.test(newValue)) {
                scope.restrictField = newValue.replace(regex, '');
              }
          });
        }
    };
  });

Ответ 2

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

Я предпочитаю не допускать ввода пробелов, используя следующую директиву.

app.directive('disallowSpaces', function() {
  return {
    restrict: 'A',

    link: function($scope, $element) {
      $element.bind('input', function() {
        $(this).val($(this).val().replace(/ /g, ''));
      });
    }
  };
});

Эта директива может быть вызвана следующим образом:

<input type="text" disallow-spaces>

Ответ 3

Директива, написанная Джейсоном, не работала для меня. Мне пришлось изменить return false на: e.preventDefault() следующим образом:

app.directive('disallowSpaces', function() {
    return {
        restrict: 'A',

        link: function($scope, $element) {
            $element.bind('keydown', function(e) {
                if (e.which === 32) {
                    e.preventDefault();
                }
            });
        }
    }
});

Ответ 4

Это помогает предотвратить ввод каких-либо специальных символов, включая пробелы:

app.directive('noSpecialChar', function() {
return {
    require: 'ngModel',
    restrict: 'A',
    link: function(scope, element, attrs, modelCtrl) {
        modelCtrl.$parsers.push(function(inputValue) {
            if (inputValue == null)
                return ''
            let cleanInputValue = inputValue.replace(/[^\w]|_/gi, '');
            if (cleanInputValue != inputValue) {
                modelCtrl.$setViewValue(cleanInputValue);
                modelCtrl.$render();
            }
            return cleanInputValue;
        });
    }
}
});

Ответ 5

Если вы хотите достичь этого без написания директивы

ng-keydown="$event.keyCode != 32 ? $event:$event.preventDefault()"