Encountering an 'undefined' property error when clicking a button in Angular 1.x

Question

Encountering an 'undefined' property error when clicking a button in Angular 1.x

Hey there, I have a question that might seem simple to some of you. I'm struggling with fixing an error and I don't quite understand why it's happening :(

This error popped up while using Angular 1.x. What I need help with is creating an alert when the user clicks a button without entering a title in the form.

Let me share my code here, keeping it simple and easy to follow :D

index.html

<div class="form-group">
    <label for="">Title</label>
    <input type="text" ng-model="shipment_template.title" class="form-control">
</div>

<button ng-click="check">Check This</button>

Here's how I handled it in my controller:

shipmentTemplate.controller.js

if (typeof $scope.shipment_template.title == 'undefined') {

    console.log("success")
} else {

    alert("Please fill the title")
}

The issue arises when I enter something in the input field, I see success in the console. However, if I leave it empty, I encounter this error instead.

Cannot read property 'title' of undefined

I initially tried using the length property instead of typeof, but unfortunately, it led to the same error :(

Apologies for any language errors in my explanation, and I would greatly appreciate your assistance in resolving this matter. Thanks! :-D

javascript angularjs

Answer 1

Answer №1

To solve the issue, simply pass the model into your check function like this:

Here is the HTML code:

<div class="form-group">
 <label for="">Title</label>
 <input type="text" ng-model="shipment_template.title" class="form-control">
</div>

<button ng-click="check(shipment_template.title)">Check This</button>

And here is the JavaScript code:

  $scope.check = function(input) {
    if (input) {
      console.log("success");
    }
    else {
      alert("Please fill the title");
    }
  }

This approach provides a clearer way to achieve your desired result. You can view the working code by visiting: Plunkr

Answer 2

To solve the issue, simply pass the model into your check function like this:

Here is the HTML code:

<div class="form-group">
 <label for="">Title</label>
 <input type="text" ng-model="shipment_template.title" class="form-control">
</div>

<button ng-click="check(shipment_template.title)">Check This</button>

And here is the JavaScript code:

  $scope.check = function(input) {
    if (input) {
      console.log("success");
    }
    else {
      alert("Please fill the title");
    }
  }

This approach provides a clearer way to achieve your desired result. You can view the working code by visiting: Plunkr

Answer 3

Answer №2

To initialize the delivery_template in your controller, you can follow this code example:

deliveryTemplate.controller.js

$scope.delivery_template = {'name':''};

Answer 4

To initialize the delivery_template in your controller, you can follow this code example:

deliveryTemplate.controller.js

$scope.delivery_template = {'name':''};

Encountering an 'undefined' property error when clicking a button in Angular 1.x

Answer №1

Answer №2

Similar questions

Managing multiple URLs in a MEAN Stack application

Angular's ngRoute is causing a redirect to a malformed URL

Avoiding the capturing of events on $( document ).mousemove

The Facebook Comments feature on my React/Node.js app is only visible after the page is refreshed

Validating image dimensions with the data-parsley plugin

Regular expression: match all content up to a certain word(s)

Is there a way to prevent the DOM from loading images until Angular has successfully injected the correct variables?

Transform the styles from a React component into Cascading Style Sheets

Here is a way to trigger a function when a select option is changed, passing the selected option as a parameter to the function

Developing a HTML button through Javascript that triggers a method with a single parameter when clicked

The Appsheet algorithm determined the exact expiration date as 2 days from the specified date

Navigation menu with submenus containing buttons

Selecting Content Dynamically with jQuery

Utilizing the controller specified in the template that has been included

Disabling prefetch in next.config.js: A comprehensive guide on eliminating data prefetching in Next.js

Issue encountered when sending information to asmx web service via ajax and displaying the result on an HTML page with a javascript function

Creating a Node.JS environment with Express and Socket.IO: A beginner's guide

Is there a jQuery function that can produce repeated output and append content with each successive click?

I'm experiencing an issue where my JavaScript function is only being triggered

Using jQuery's .each() method to iterate over a JSON object may only display the