Transferring object information to Backand using Ionic 2

I have developed a signup page using Ionic 2. In this signup page, I have included a dropdown menu for users to select their blood type. However, I am facing an issue where the selected blood type is not being sent to the Backand database as expected. I'm unsure of what mistake I might be making that is causing this problem.

signup.ts

import {Component} from '@angular/core';
import { BackandService } from '@backand/angular2-sdk'
import { LoginPage } from '../login/login';
import { AlertController } from 'ionic-angular';

@Component({
   templateUrl: 'signup.html',
   selector: 'page-signup',
})

 export class SignupPage {

  email:string = '';
  firstName:string = '';
  lastName:string = '';
  signUpPassword: string = '';
  confirmPassword: string = '';
  bloodType: Object = {};


  constructor(private backand: BackandService, private alertCtrl: 
  AlertController) {}


  public signUp() {

   this.backand.signup(this.firstName, this.lastName, this.email,this.signUpPassword, this.confirmPassword, this.bloodType)
  .then((res: any) =>
   {
    let alert = this.alertCtrl.create({
    subTitle: 'Thank you for signing up.',
    buttons:['Login']
    });
    alert.present();
    this.email = this.signUpPassword = this.confirmPassword = this.firstName= this.lastName = this.bloodType = '';
    }
   );
  }
}

signup.html

<ion-item>
    <ion-label>Select Your Blood Type</ion-label>
    <ion-select type="text" (input)="bloodType = $event.target.value" ng-model="bloodType">
      <ion-option>O Positive</ion-option>
      <ion-option> O Negative</ion-option>
      <ion-option> A Positive</ion-option>
      <ion-option> A Negative</ion-option>
      <ion-option> B Positive</ion-option>
      <ion-option> B Negative</ion-option>
      <ion-option> AB Positive</ion-option>
      <ion-option> AB Negative</ion-option>
      <ion-option> Unknown</ion-option>
    </ion-select>
 <ion-item>

Answer №1

After much deliberation, I managed to solve the problem on my own. The key was adjusting the code in signup.ts:

this.backand.signup(this.firstName, this.lastName, this.email,this.signUpPassword, this.confirmPassword, {"bloodType": this.bloodType})

And also making changes in signup.html:

<ion-select type="text" (input)="bloodType = $event.target.value" [(ng-model)]="bloodType">

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

Issues with the functionality of Angular and Material's multi-level menu and breadcrumb integration

Currently, I am working on a project using Angular 6 and Angular Material 6. I am attempting to create a multilevel menu with breadcrumb functionality. While I have successfully implemented the multilevel menu, I am facing an issue with navigating the menu ...

Is it possible to insert data into SQL Server from an Angular application without relying on .NET Core?

Is there a way to extract data from an Angular-made form and store it in a SQL Server table without the need for .NET Core? ...

When attempting to compile Typescript code, error TS1128 occurs indicating a missing declaration or statement. However, the code functions correctly when executed through a server

Currently, I'm in the process of developing a project using Angular2. As part of this project, I have created a primary Component class which serves as a central piece: import { Component, OnInit} from '@angular/core'; import { submitServi ...

Struggling to assign the correct data type to a property in Typescript

I am encountering a TypeScript error with the following code. In this interface, the 'items' property can be either an object or an array depending on the code and response. I am unsure how to specify the datatype of 'array/object/any', ...

Obtaining the NativeElement of a component in Angular 7 Jasmine unit tests

Within the HTML of my main component, there is a my-grid component present. Main.component.html: <my-grid id="myDataGrid" [config]="gridOptions" </my-grid> In main.component.specs.ts, how can I access the NativeElement of my-grid? Cu ...

Grails3 and Angular profile as the default deployment configuration

What is the most effective approach to deploy the Grails3 war with an Angular profile (specifically Angular2)? My project is in Grails 3.2.9 and runs smoothly in development mode. I'm looking for a streamlined gradle build command that can create a co ...

Exploring how process.argv in NodeJS can be utilized within JavaScript code compiled by

I'm having trouble compiling a basic TypeScript file using webpack (with 'awesome-typescript-loader') that needs to access command line arguments. It seems like the compiled JavaScript is causing a problem by overriding the Node 'proce ...

How to deliver various static files in NestJS using different paths and prefixes?

I've set up static file serving for developer documentation using the following code: app.useStaticAssets(docsLocation, { prefix: "/docs/" }) Now I have another directory with more static content that I want to serve. Is it possible to serve from ...

Tips for verifying the connections between an Angular application and Azure Function (negotiate) when integrating with Azure SignalR Service

I'm working on an angular application that is authenticated with Azure AD, connecting to an Azure Function (negotiate) which then communicates with Azure SignalR service using specific keys. I am looking for guidance on how to authenticate requests ma ...

Tips on mocking an ngrx selector within a component

Within a component, we utilize an ngrx selector to access various segments of the state. public isListLoading$ = this.store.select(fromStore.getLoading); public users$ = this.store.select(fromStore.getUsers); The fromStore.method is formed using the ngrx ...

Choose the Nth option in the dropdown list using programming

Currently, I have a script that dynamically populates a select box with unknown values and quantities of items. I am looking to create another script that mimics the action of selecting the Nth item in that box. Despite my research, I have been unable to ...

Transform a literal string type definition into a string value (similar to the typeof operator), or is it the other way around in TypeScript?

Is there a way to retrieve the string value of a string literal type without having to define it twice, similar to the typeof operator in C#? myStringLiteral: 'STRING TYPE'; myString: string = typeof(myStringLiteral); // I want myString to be e ...

Issue: The 'typeOf' function is not exported by the index.js file in the node_modules eact-is folder, which is causing an import error in the styled-components.browser.esm.js file in the node_modulesstyled

Every time I attempt to start running, there are issues with breaks in npm start (microbundle-crl --no-compress --format modern,cjs) I have attempted deleting node_modules and package-lock.json, then running npm i again but it hasn't resolved the pro ...

The combination of Ionic's new slides feature paired with Swiper and angular-google-maps results in a gray area appearing when the user

Whenever I try to combine the new slides feature (known as Swiper) with angular-google-maps, dragging within Google Maps becomes impossible and results in a grey space instead. Even when I attempt to disable swiping using .lockSwipes(), the issue persists ...

How can I use Laravel to enter data using the post method?

I've been struggling with data transfer in my Angular component for a while now, specifically using a post method. Despite extensive research and reading various documents, I haven't been able to find a solution. Can you assist me with this issue ...

Enhancing Angular2 performance when managing a large number of input elements with two-way binding

My current project involves a component that resembles a spreadsheet, with numerous elements using two-way binding [(ngModel)] to a mutable object. However, when the number of inputs exceeds 100, the UI starts to slow down. After profiling the application ...

Internet Explorer displays a blank page for the Angular app, while it functions correctly in Google

Currently, I am diving into the world of Angular 4 and have created a basic application using Angular CLI (NG New HelloWorld). When attempting to run ng serve and navigate to http://localhost:4200/, the page loads without issue in Chrome. However, when try ...

What is the best way to perform a deep copy in Angular 4 without relying on JQuery functions?

Within my application, I am working with an array of heroes which are displayed in a list using *ngFor. When a user clicks on a hero in the list, the hero is copied to a new variable and that variable is then bound to an input field using two-way binding. ...

Error: User authentication failed: username: `name` field is mandatory

While developing the backend of my app, I have integrated mongoose and Next.js. My current challenge is implementing a push function to add a new user to the database. As I am still relatively new to using mongoose, especially with typescript, I am followi ...

What steps should I follow to ensure that the processData function waits for the data returned by the getData function in Angular?

After calling the getData function, each object is stored in an array and returned. Now I need the processData function to await these results from getData and then further process them. However, when I try to console.log(cleaningData), I don't see an ...