Буквенно-цифровое значение в ngModel выводится в верхнем регистре в AngularJS

У меня есть форма с полями ввода. Одно поле ввода допускает буквенно-цифровые значения. Но если значение содержит буквы, то буквы должны быть в верхнем регистре. Как я могу реализовать этот подход? Можно ли определить это в поле ввода, когда пользователь делает ввод, тогда буквы автоматически отображаются в верхнем регистре?

Вид:

<div class="form-group-sm has-feedback">
  <label class="control-label" for="article-id">Article Nr.</label>
  <input type="text" 
         class="form-control" 
         name="Article" 
         id="article-id"
         ng-model="selected.article" 
         ng-pattern="/^[a-zA-Z]{2}[a-zA-Z\d]{9}[0-9]$/"
         ng-required="true"
         />
</div>
...
//the other inputs are the same definition

Мне важно сохранить значение в БД заглавными буквами.


javascript angularjs angular-ngmodel uppercase
person yuro    schedule 09.07.2015    source источник
comment
можно использовать фильтр на ng-модели   -  person ngLover    schedule 09.07.2015
comment
@ngLover и как использовать uppercase-фильтр в ngModel?   -  person yuro    schedule 09.07.2015
comment
Вы думали об изменении своего шаблона, чтобы принимать только заглавные буквы?   -  person Yumarx Polanco    schedule 09.07.2015
comment
@JumarPolanco Нет, мне нужен этот шаблон, потому что он должен состоять из букв и цифр.   -  person yuro    schedule 09.07.2015
comment
Если вы используете этот /^[A-Z]{2}[A-Z\d]{9}[0-9]$/ в качестве шаблона, он будет делать то же самое, что и раньше, но принимает только верхний регистр.   -  person Yumarx Polanco    schedule 09.07.2015
comment
@JumarPolanco Я знаю, но пользователь должен иметь возможность писать также строчными буквами, а ngModel автоматически преобразует входные буквы в прописные.   -  person yuro    schedule 09.07.2015

Ответы (2)


arrow_upward
2
arrow_downward

Просто создайте простую директиву, этот ответ основан на ответе здесь: Angular .js: как автоматически сделать заглавными буквы в поле ввода?

myApp.directive('capitalize', function() {
   return {
     require: 'ngModel',
     link: function(scope, element, attrs, modelCtrl) {
        var capitalize = function(inputValue) {
           if(inputValue == undefined) inputValue = '';
           var capitalized = inputValue.toUpperCase();
           if(capitalized !== inputValue) {
              modelCtrl.$setViewValue(capitalized);
              modelCtrl.$render();
            }         
            return capitalized;
         }
         modelCtrl.$parsers.push(capitalize);
         capitalize(scope[attrs.ngModel]);  // capitalize initial value
     }
   };
});

Нравится HTML –

<input type="text" ng-model="name" capitalize>
person ngLover    schedule 09.07.2015
comment
попробую ваш пример. - person yuro; 09.07.2015
comment
я уверен, что если работает нормально, тогда примите и помогите другим - person ngLover; 09.07.2015
comment
это работает нормально. Но я решил это также с помощью кода CSS. - person yuro; 09.07.2015
comment
Обратите внимание, что в angular 1.5 это изменит данные, но вы по-прежнему будете видеть строчные буквы на входе. Поэтому вам нужно добавить решение CSS (или вы можете предоставить функцию $render, которая устанавливает значение ввода, но это очень неуглово). - person Amy Blankenship; 10.06.2016

arrow_upward
0
arrow_downward

Первый ответ работает нормально. Но я решил это с помощью этого кода CSS:

CSS:
#article-id {
    text-transform: uppercase;
}
person yuro    schedule 09.07.2015