Very new to AngularJS... I have an input field where I want the first letter to be capitalized. I added the below directive:

.directive('capitalizeFirst', function () {
    return {
        require: 'ngModel',
        link: function ($scope, $element, $attrs, $modelCtrl) {

            var capitalize = function (inputValue) {

                var capitalized = angular.uppercase(inputValue.substring(0, 1)) + inputValue.substring(1);
                if (capitalized !== inputValue) {
                    $modelCtrl.$setViewValue(capitalized);
                    $modelCtrl.$render();
                }
                return capitalized;
            };
            $modelCtrl.$parsers.push(capitalize);
            capitalize($scope[$attrs.ngModel]); // capitalize initial value
        }
    };
})

It works! But it fires an error in my console:

TypeError: Cannot read property 'substring' of undefined

Can anybody let me know what is wrong? Thanks in advance!

Very new to AngularJS... I have an input field where I want the first letter to be capitalized. I added the below directive:

.directive('capitalizeFirst', function () {
    return {
        require: 'ngModel',
        link: function ($scope, $element, $attrs, $modelCtrl) {

            var capitalize = function (inputValue) {

                var capitalized = angular.uppercase(inputValue.substring(0, 1)) + inputValue.substring(1);
                if (capitalized !== inputValue) {
                    $modelCtrl.$setViewValue(capitalized);
                    $modelCtrl.$render();
                }
                return capitalized;
            };
            $modelCtrl.$parsers.push(capitalize);
            capitalize($scope[$attrs.ngModel]); // capitalize initial value
        }
    };
})

It works! But it fires an error in my console:

TypeError: Cannot read property 'substring' of undefined

Can anybody let me know what is wrong? Thanks in advance!

• javascript
• angularjs
• angularjs-directive

2 Answers 2

Seems that you didn't check if inputValue is null.

.directive('capitalizeFirst', function () {
return {
    require: 'ngModel',
    link: function ($scope, $element, $attrs, $modelCtrl) {

        var capitalize = function (inputValue) {
            if (!! inputValue) {
                 var capitalized = angular.uppercase(inputValue.substring(0, 1)) + inputValue.substring(1);
                 if (capitalized !== inputValue) {
                    $modelCtrl.$setViewValue(capitalized);
                    $modelCtrl.$render();
                 }
                 return capitalized;
            }
            return inputValue;
        };
        $modelCtrl.$parsers.push(capitalize);
        capitalize($scope[$attrs.ngModel]); // capitalize initial value
    }
};})

This is my solution for calling str.slice(<start>,<end>) when you are making an API call, and the page may load before the API call pletes, so you will get an error saying:

cannot read property 'substring' of undefined

Here is my angular/js/filters.js simple code to evaluate that the str where we are calling slice() or substring() on exists first before slicing it:

angular.module('conciergeFilters', []).filter('ph', function() {
  return function(str) {
    if (!! str) {
        return "(" + str.slice(2,5) + ")" + str.slice(5,8) + "-" + str.slice(8,12);
        }
    return str;
  };
});

Also, here is a good blog post on the difference between slice(), substring() and substr() if trying to pick the right method to use:

http://www.bennadel./blog/2159-using-slice-substring-and-substr-in-javascript.htm