0

I have this code below working fine when a user is typing an input data. But my problem is when the data is from the database(auto filled) my directive is not working(capitalize the letter ). Is there a reason why its not working?.

But when using a class="text-uppercase" its working.

HTML

<input ng-model="profile.Name" type="text" placeholder="" maxlength="40" capitalize />

JS

app.directive('capitalize', function ($parse) {
return {
    require: 'ngModel',
    link: function (scope, element, attrs, modelCtrl) {
        var capitalize = function (inputValue) {
            if (inputValue === undefined) { inputValue = ''; }
            var capitalized = inputValue.toUpperCase();
            //for (var i = 0; i < capitalized.length; i++) {
            //    capitalized[i] = capitalized[i].charAt(0).toUpperCase() + capitalized[i].substring(1);
            //}
            if (capitalized !== inputValue) {
                modelCtrl.$setViewValue(capitalized);
                modelCtrl.$render();
            }
            return capitalized;
        }
        modelCtrl.$parsers.push(capitalize);
        capitalize($parse(attrs.ngModel)(scope)); // capitalize initial value
    }
  };
});
KiRa
  • 924
  • 3
  • 17
  • 42

1 Answers1

0

You can check below for more information on require: 'ngModel' configure setting.

What's the meaning of require: 'ngModel'?

Thomson Mixab
  • 657
  • 4
  • 8