"Ionic application encountering issue with retrieving data from email inbox, resulting in undefined

I encountered an issue with creating a user account using Ionic Framework and Firebase. Oddly, the email box returns 'undefined' while the password box functions correctly despite being coded in a similar manner. Below is my HTML snippet:

<ion-view view-title="Create Account">

<form name="form" novalidate="" ng-submit="createUser(form)">
  <div class="list">
    <label class="item item-input">
      <span class="input-label">Email:</span>
      <input type="text" ng-name = "email" ng-model="form.email" ng-minlength="5" ng-maxlength="20" required>
    </label>

    <div class="error-container">
      <div ng-messages-include="error-list.html"></div>
    </div>

    <label class="item item-input">
      <span class="input-label">Password</span>
      <input type="password" ng-name = "password" ng-model="form.password" ng-minlength="5" ng-maxlength="20" required>
    </label>

    <div class="error-container last-error-container">
        <div ng-messages-include="error-list.html"></div>
    </div>

  </div>
  <button class="button button-full button-positive" type="submit">
      Create Account
    </button>
</form>

Below is the controller class, which is invoked when the form is submitted:

  $scope.createUser = function(form) {
console.log("Email: " + form.email);
console.log(form.password);

var information = {
  email: form.email,
  password: form.password
};
Settings.createUser(form.email, form.password);

};

Upon inspection, the first console log always displays 'Email: undefined', while the second one reflects the correct password input. This discrepancy causes the call to Settings.createUser to fail due to the 'undefined' email value.

What could be causing this issue?

Appreciate any help!

Answer №1

When writing your $scope.createUser function, make sure to access your elements by using:

this.email
this.password

Instead of using form.email and form.password. You can find an example that may help you achieve your goal in this Plunkr link. Additionally, the AngularJS documentation on forms contains useful information to assist you in your project.

http://plnkr.co/edit/1ZFvLHLSXgkqQVNHCGMb?p=preview

https://docs.angularjs.org/guide/forms

Answer №2

Aha! I finally cracked the code...It all came down to that pesky ng-maxlength="20". It dawned on me that when I entered [email protected], it worked just fine, but the input I was actually testing with, '[email protected]', didn't pass because it exceeded 20 characters. Mystery solved!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

WebGL Tips: Resizing an object using vector multiplication, achievement showcased (see image)

I'm currently exploring methods to scale an object without taking into consideration its local rotation. While I have achieved some success using morph animation, I am searching for a more dependable solution. ...

Tips for uploading files in asp.net using an ajax call

I have developed a small asp.net web forms application for managing emails. The interface allows users to input mandatory information such as sender, recipient, and subject. I am now looking to implement file attachments in the emails using the asp.net fil ...

Is there a way to handle the ajax request only when necessary, instead of processing it every few seconds?

Currently, I am working on an AJAX chat system using PHP, MySQL, JavaScript, and AJAX. I have a piece of code that retrieves all chat messages within a div using AJAX, with the function running every 2 seconds. My issue lies in the fact that the div autom ...

difficulty with parsing JSON in jQuery when referencing an external file containing the same data

Looking for help with parsing a json file using jquery? Check out this working sample: http://jsfiddle.net/bw85zeea/ I'm encountering an issue when trying to load "data2" from an external file. The browser keeps complaining that it's an invalid ...

Incorporate a new class for every date within the range of start and end

I have incorporated a JQuery event calendar plugin into my project, sourced from this specific website. Within my events, there are distinct start and end dates. Currently, I have managed to display green squares on the calendar for both the start and end ...

Error in finding the element with Selenium webdriver 2.0 was encountered

I can't seem to find the element with the specified class name. Here's a snippet of the HTML code: <a class="j-js-stream-options j-homenav-options jive-icon-med jive-icon-gear" title="Stream options" href="#"></a> I attempted to gen ...

How come my FormData POST request isn't being blocked by CORS policy?

I am facing confusion with one query: why does my POST request, which sends form data from a frontend hosted on a different origin to a backend hosted on a different origin, not get blocked by CORS policy? My Node.js code includes the following: const exp ...

Infinite loop caused by Angular JS routing止

I have set up a Django server with the following configuration: urls.py urlpatterns = [ url('^', IndexView.as_view(), name='index') ] landing/urls.py urlpatterns = [ url(r'^admin/', admin.site.urls), url('^.*&a ...

Retrieving individual data elements from an array with the help of the .find() method

I am struggling to display specific details of an object within an array by using .find() method, but I keep receiving undefined as the output. Below is the code snippet where I attempted this, when I log the ID, I can see a value, however, when I try to ...

The <h> tag gains height on its own accord

Here is my original code: <h4 class="orange2" ><a href="<?php echo base_url();?>v/<?php echo $this->uri->segment(3);?>/<?php echo $v['uniq'];?>"><?php echo trim(strip_tags($v['video_name']));?> ...

Enhance the functionality of Javascript Promise.then by allowing the argument function to accept an extra parameter

In my code, I am currently utilizing ES6 Promise as shown below: const ctx = {} Promise.resolve() .then(() => doSomethingWith(ctx)) .then((retValue) => doSomethingElseWith(retValue, ctx)) I wish to achieve something like this: const ctx = {} u ...

Filter a div based on multiple conditions using JavaScript/jQuery

In my filtering system, I have two sections: place and attraction. When I select a place, the corresponding div is displayed according to the selected place. Similarly, when I select an attraction, only the attractions are filtered accordingly. <ul clas ...

How to align the markup of a dynamic directive with its host in Angular?

Introducing a simple directive called [popover], its main purpose is to dynamically inject a component (as a sibling). Implementation example: @Component({ selector: 'my-app', template: ` <div> <button popover>Popover ...

Utilize AngularJS to inject a service into a module without assigning it to a variable, enabling easier minification

Currently, I am attempting to decrease the size of my AngularJS JavaScript code (using SquishIt). Within my module, there is a service injected as a function argument, as shown below. var myapp = angular.module('myapp', ['ngSanitize'] ...

Suggestions for specifying options with CapacitorSQLite.createSyncTable() when beginning to utilize @capacitor-community/sqlite

Currently, I am following a tutorial on capacitor ionic with sqlite from 2020. Unfortunately, there doesn't seem to be a more recent tutorial available online. (https://youtu.be/2kTT3k8ztL8?t=635) A lot has changed since the tutorial was released, bu ...

Why does console.log in JavaScript exhibit different behaviors as evidenced by the code?

Exploring the behavior of console.log(obj) compared to console.log("obj"+"\n"+obj) in the code snippet below reveals two distinct output outcomes. const obj = new Object() obj.first = 'John' obj.last = 'Doe' obj.alive = true ob ...

What is the best way to retrieve the object of the selected option from a single select input in Angular

I'm currently working with an array of objects that looks like this: let myArray = [{'id':1,'Name':"ABC"},{'id':2,'Name':"XYZ"}] I'm trying to retrieve object values based on a dropdown selection, but so ...

Show search results in real-time as you type

I am currently developing a SharePoint 2007 web part using Visual Studio. The main goal of this web part is to search a SharePoint list and present the results to the user. My objective is to have the results displayed automatically once the user finishes ...

Troubleshooting: Dealing with Access-Control-Allow-Origin Issue

While debugging a web app in Visual Studio 2013 Express for Web, I encountered the following error. This particular app is built with MVC using angularjs, jquery, and bootstrap. Interestingly, my other web apps are functioning without any issues and do not ...

Synchronized loops in jQuery using the .each method

I'm having trouble getting the ajaxStop function in jquery to work. Any suggestions on how to make it fire? My goal is to iterate through each anchor tag and update some content within it. After that, I want to use the ajaxstop event to trigger a scr ...