AngularJS ng-bind not functioning - Unable to assign value to nonexistent property

Question

AngularJS ng-bind not functioning - Unable to assign value to nonexistent property

I'm completely new to AngularJS and I am facing an issue while trying to set a value for a span using AngularJS ng-bind to validate a name input field. Despite my attempts, I haven't been able to make it work.

HTML:

<div class="modal fade" id="myModal" role="dialog"
    aria-labelledby="myModalLabel" aria-hidden="true" ng-controller="modalCtrl as data">

    <input id="name" ng-model="data.name"
       type="text" ng-blur="validateName(this.data)" />
    <span ng-bind="data.name.errMsg"></span>

</div>

JavaScript:

$scope.validateName=function(obj){
    var name = obj.name;
    var regex = new RegExp("^[a-zA-Z0-9\/\@\&\%\*\$\>\<\\[\\]\,\(\)\_\'\;\ \:\\-\\.]+$");
    if(name != undefined && name != null && name.length < 3){
        obj.name.errMsg = "Please enter minimum 3 characters in Name";
        //$scope.name.errMsg = "Please enter minimum 3 characters in Name"
        // TypeError: Cannot set property 'errMsg' of undefined
    }
};

javascript angularjs

Answer 1

Answer №1

Ensure that the errMsg is defined on the appropriate scope variable.

Here's a suggested approach:

angular.module("app",[])
.controller("modalCtrl",function(){
var ctrl = this;
ctrl.nameObj = {};
ctrl.nameObj.name= "sss";

ctrl.validateName=function(){
    var name = ctrl.nameObj.name;
    var regex = new RegExp("^[a-zA-Z0-9\/\@\&\%\*\$\>\<\\[\\]\,\(\)\_\'\;\ \:\\-\\.]+$");
    if(name != undefined && name != null && name.length < 3){
        ctrl.nameObj.errMsg = "Please enter minimum 3 characters in Name"
        // TypeError: Cannot set property 'errMsg' of undefined
    } else { ctrl.nameObj.errMsg = "";}
};

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="modalCtrl as data">

    <input id="name" ng-model="data.nameObj.name"
       type="text" ng-blur="data.validateName()" />
    <span ng-bind="data.nameObj.errMsg"></span>
    {{data.nameObj.errMsg}}

</div>

Answer 2

Ensure that the errMsg is defined on the appropriate scope variable.

Here's a suggested approach:

angular.module("app",[])
.controller("modalCtrl",function(){
var ctrl = this;
ctrl.nameObj = {};
ctrl.nameObj.name= "sss";

ctrl.validateName=function(){
    var name = ctrl.nameObj.name;
    var regex = new RegExp("^[a-zA-Z0-9\/\@\&\%\*\$\>\<\\[\\]\,\(\)\_\'\;\ \:\\-\\.]+$");
    if(name != undefined && name != null && name.length < 3){
        ctrl.nameObj.errMsg = "Please enter minimum 3 characters in Name"
        // TypeError: Cannot set property 'errMsg' of undefined
    } else { ctrl.nameObj.errMsg = "";}
};

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="modalCtrl as data">

    <input id="name" ng-model="data.nameObj.name"
       type="text" ng-blur="data.validateName()" />
    <span ng-bind="data.nameObj.errMsg"></span>
    {{data.nameObj.errMsg}}

</div>

Answer 3

Answer №2

The variable obj.name is a string, not an object. It is not possible to set properties on a string type variable. To set the obj variable correctly, you can do so by using the following syntax:

obj = [{name:'name', errMsg:'error message here'}]

Answer 4

The variable obj.name is a string, not an object. It is not possible to set properties on a string type variable. To set the obj variable correctly, you can do so by using the following syntax:

obj = [{name:'name', errMsg:'error message here'}]

Answer 5

Answer №3

<div class="modal fade" id="myModal" role="dialog"
    aria-labelledby="myModalLabel" aria-hidden="true" ng-controller="modalCtrl as data">

    <input id="name" ng-model="data.name"
       type="text" ng-blur="validateName(this.data)" />
    <span ng-bind="data.errMsg"></span> // Using data.errMsg instead of data.name.errMsg

</div>


$scope.validateName=function(obj){
    var name = obj.name;
    var regex = new RegExp("^[a-zA-Z0-9\/\@\&\%\*\$\>\<\\[\\]\,\(\)\_\'\;\ \:\\-\\.]+$");
    if(name != undefined && name != null && name.length < 3){
        obj.errMsg = "Please enter minimum 3 characters in Name"; 
        // Assigning error message to obj.errMsg instead of obj.name.errMsg
    }
};

Answer 6

<div class="modal fade" id="myModal" role="dialog"
    aria-labelledby="myModalLabel" aria-hidden="true" ng-controller="modalCtrl as data">

    <input id="name" ng-model="data.name"
       type="text" ng-blur="validateName(this.data)" />
    <span ng-bind="data.errMsg"></span> // Using data.errMsg instead of data.name.errMsg

</div>


$scope.validateName=function(obj){
    var name = obj.name;
    var regex = new RegExp("^[a-zA-Z0-9\/\@\&\%\*\$\>\<\\[\\]\,\(\)\_\'\;\ \:\\-\\.]+$");
    if(name != undefined && name != null && name.length < 3){
        obj.errMsg = "Please enter minimum 3 characters in Name"; 
        // Assigning error message to obj.errMsg instead of obj.name.errMsg
    }
};

Answer 7

Answer №4

If you're looking for a solution, give this code a shot. Also, take a look at this plunker link to see a working example based on the scenario provided.

Template:

<body ng-controller="MainCtrl as data">
    <div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <input id="name" ng-model="data.name" type="text" ng-blur="validateName(this.data)" /><br/>
        <span ng-bind="data.errMsg"></span>
    </div>
</body>

Controller:

$scope.validateName=function(obj){
    var name = obj.name;
    var regex = new RegExp("^[a-zA-Z0-9\/\@\&\%\*\$\>\<\\[\\]\,\(\)\_\'\;\ \:\\-\\.]+$");
    if(name != undefined && name != null && name.length < 3){
        obj.errMsg = "Please enter minimum 3 characters in Name";
    } else obj.errMsg = '';
};

Answer 8

If you're looking for a solution, give this code a shot. Also, take a look at this plunker link to see a working example based on the scenario provided.

Template:

<body ng-controller="MainCtrl as data">
    <div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <input id="name" ng-model="data.name" type="text" ng-blur="validateName(this.data)" /><br/>
        <span ng-bind="data.errMsg"></span>
    </div>
</body>

Controller:

$scope.validateName=function(obj){
    var name = obj.name;
    var regex = new RegExp("^[a-zA-Z0-9\/\@\&\%\*\$\>\<\\[\\]\,\(\)\_\'\;\ \:\\-\\.]+$");
    if(name != undefined && name != null && name.length < 3){
        obj.errMsg = "Please enter minimum 3 characters in Name";
    } else obj.errMsg = '';
};

AngularJS ng-bind not functioning - Unable to assign value to nonexistent property

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Retrieving Book Title using Google Books API and ISBN

Unclear value of button when being passed

creating a countdown timer for the carousel

What is the best way to style the current element being targeted in React?

Tips for extracting and structuring strings from unstructured CSV data using JavaScript?

Sharing data between functions in JavaScript allows for more flexible and interdependent code structure

Trigger functions by clicking or bind click events by calling a function?

Tips for invoking or triggering the Ajax change function when there is only a single option available

The issue arises when attempting to access the response variable in a successful $http call within

Organize the dataset into groups based on every possible key

Set YouTube Playlist to start from a random index when embedded

Guide on hiding a div element when clicked outside of it?

Is there a way to have my MUI Typography component display a unique image cursor when hovered over?

Adding content to an Element Id using JavaScript can be done by utilizing the .insertAfter or .append methods. Since it involves a script tag, you cannot use the dollar sign

Unable to retrieve content using the query.ID in Next.js

JavaScript utilized to create a fully immersive full-screen webpage

Alexa Account Linking - Error: Account linking credentials are not valid

Is it possible to utilize JavaScript for rotating and cropping a collection of images before uploading them to the gallery?

just half of the four $_POST variables are actually assigned

What sets Fetch Promise apart in terms of delivery success?