Retrieve the radio button value without using a key when submitting a form in JSON

Looking to extract the value upon form submission in Angular, here is the code:

In my Typescript:

constructor(public navCtrl: NavController, public navParams: NavParams, public modalCtrl: ModalController, public formBuilder: FormBuilder, public alertCtrl: AlertController,
public loadingCtrl: LoadingController) {

this.memleticsForm = formBuilder.group({
    changeType: [{}, Validators.required]
});
}


memleticsSubmitForm(form) {
    console.log(form);

  }

Html:

 <form name="learningtestForm" [formGroup]="memleticsForm" (submit)="memleticsSubmitForm(memleticsForm.value)" novalidate>
<table>
  <tr>
    <th>Question</th>
    <th>0</th>
    <th>1</th>
    <th>2</th>
  </tr>

  <tr>
   <td>You have a personal or private interest or hobby that you like to do alone.</td>
   <td>
      <input type="radio" formControlName="changeType" [value]=0>
   </td>
   <td>
      <input type="radio" formControlName="changeType" [value]=1>
   </td>
   <td>
      <input type="radio" formControlName="changeType" [value]=2>
   </td>
  </tr>

</table>

<button ion-button block color="secondary" end type="submit">Submit</button>

Upon clicking and submitting the button, the output on the console.log shows "Object {changeType: 2}"

The goal is to only retrieve the "2" and use it for calculations like this:

memleticsSubmitForm(form) {
    var x = form * 5;
console.log(x); // if 2 is selected, display should be 10
}

Answer №1

If you encounter this situation, you may consider implementing the following solution:

handleFormSubmission(formData) {
    console.log(formData.changeType);
    const changeType = formData.changeType; // Ensure your form includes this attribute
    var result = changeType * 5; // Utilize it accordingly ;)
    console.log(result);
}

Trust this guidance proves beneficial!

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

Changing the data type of an integer to a string within an Object

I'm working with two arrays of objects. I need to convert the data values in the first format from integers to strings, but I'm struggling to find a simple solution. Is there anyone who can provide assistance? https://i.sstatic.net/mzqWE.png If ...

Javascript - Converting a function to run asynchronously

Just starting to work with Node.js for the first time and feeling a bit puzzled by asynchronous functions. I'm getting better at identifying when async is causing issues, but still unsure how to fix them. Here's the code snippet in question: fu ...

NextJS allows for custom styling of Tiktok embeds to create a unique and

Currently, I am in the process of constructing a website that integrates Tiktok oEmbed functionality. Thus far, everything is running smoothly, but I have encountered an issue - how can I customize the styling to make the body background transparent? I ha ...

Combine table cells to improve readability on smaller screens

I currently have a setup designed for larger screens: <table> <thead> <tr> <th>title and image</th> <th>description</th> </tr> </thead> <tbody> ...

Upon triggering a GET request to the URL "http://localhost:3000/search", a "404 (Not Found)" error response was received. Interestingly

Can Someone assist me please? I'm having trouble creating a website similar to YouTube and encountering the following error: GET http://localhost:3000/search 404 (Not Found) Uncaught (in promise) Error: Request failed with status code 404 at createEr ...

Arranging items into an array?

I have a query. Let me start by posting the HTML code, even though I know using tables for design is not recommended. However, in this case, it's only for educational purposes. <table id="placeholder"> <tr> <td><img src="img/ ...

Show a table when a button is clicked using Javascript

Undertaking a project called: Tennis Club Management involving javascript, HTML, CSS, and bootstrap. The project includes a Login Page (index.html) and a Manage Players Page (managePlayers.html). Within the managePlayers.html, there are two buttons - Add P ...

What is the process for removing a selection in V-autocomplete in Vuetify?

One of the features I implemented in my project is using Vuetify's v-autocomplete component. It allows users to search for and retrieve necessary information from an API. However, I encountered a scenario where I needed to delete the selection after t ...

How to launch a new window for a popup

How can I make IE8 open new windows as pop-ups without changing browser settings? I want to use JavaScript's window.open() function. Firefox opens new windows correctly, but IE8 opens them in tabs instead of pop-up windows. Any suggestions on how to a ...

Having trouble extracting JSON from the HTTP response?

Currently, I'm struggling to find a solution in order to properly extract and process the JSON data from . While my code has no issues decoding the JSON data retrieved from , it always returns empty or zero values when directed towards the CoinMarketC ...

Error: The identifier has already been declared and cannot be re-declared

I am attempting to create a modal-cookie feature that will display a modal on page load if a cookie named "name" does not exist. However, I encountered an error: Uncaught SyntaxError: Identifier 'addCookie' has already been declared. This erro ...

Issue with TypeScript when calling the jQuery getJSON() method

Currently, I am working with TypeScript version 1.7.5 and the latest jQuery type definition available. However, when I attempt to make a call to $.getJSON(), it results in an error message stating "error TS2346: Supplied parameters do not match any signatu ...

Three.js object changing position along the curve of a bowl

I am currently developing a threejs game. My goal is to have a ball move from the z-position of -5000 to 0. This is how I am creating the mesh: let geometry = new THREE.SphereGeometry(100, 32, 32); let material = new THREE.MeshBasicMaterial({ ...

Loading tabs dynamically in Angular 2 based on header click event

I successfully created a custom tab component using Angular 2, and it is functioning well with the following usage: <us-tab-verticle> <vtab-content [tabTitle]="'Basic Information'"><basic-info> </basic-info></vtab- ...

Refresh a javascript file using the power of jquery

I have created a PHP file that displays a session meter in Joomla's frontend using JavaScript. Additionally, I have another PHP file that shows user details and reloads using jQuery. My goal is to make the JavaScript session meter also reload when the ...

Ways to implement logging in an NPM package without the need for a specific logging library

Currently, I am in the process of developing a company npm package using TypeScript and transferring existing code to it. Within the existing code, there are instances of console.log, console.warn, and console.error statements, as shown below: try { c ...

Does vite handle module imports differently during development versus production?

I am currently working on incorporating the jointjs library into a Vue application. It is being declared as a global property in Vue and then modified accordingly. Below is a basic example of what I am trying to achieve: import Vue from 'vue'; im ...

Why am I encountering an undefined value in my AngularJS code?

Can you explain why I am receiving an undefined value when clicking on the chart? I have created a bar chart and am attempting to retrieve the selected item and its value. The fiddle I provided displays the correct value: http://jsfiddle.net/b4n9z19v/ Ho ...

When two-dimensional arrays meet destructuring, it results in a type error

Can anyone clarify TypeScript behavior in this scenario? JavaScript const test1 = [ ['a', 'b'], ['c', 'd'], ]; const test2 = [ ...[ ['a', 'b'], ['c', ' ...

Searching for data based on specific keywords in Angular 2, rather than using a wildcard search, can be done by utilizing the key-in

My dropdown contains 100 values, and I am currently able to search for these values based on key input using wild search. However, I would like the dropdown to display values based on the specific alphabet that I enter first. HTML: <div class="col- ...