"Utilizing FormData in an IONIC 5 project with

While creating a user profile, I am encountering an issue where the FormData being generated for sending is empty despite all other fields having values. Below is the code snippet from cadastro.ts:


import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

import { AlertController, ActionSheetController } from '@ionic/angular';
import { PictureSourceType, Camera, CameraOptions } from '@ionic-native/camera/ngx';


import { CadastroService } from 'src/app/services/cadastro.service';


@Component({
  selector: 'app-cadastro',
  templateUrl: './cadastro.page.html',
  styleUrls: ['./cadastro.page.scss'],
})
export class CadastroPage implements OnInit {
  public registerForm: FormGroup

  constructor(
    private cadastroService: CadastroService,
    private router: Router,
    private formBuilder: FormBuilder,
    private alertController: AlertController,
    private ActionSheetController: ActionSheetController,
    private camera: Camera,
  ) { }

  ngOnInit() {

    this.registerForm = this.formBuilder.group({
      foto: [''],
      nome: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      cpf: ['', Validators.required],
      telefone: ['', Validators.required],
      password: ['', Validators.required],
      conf_pass: ['', Validators.required]
    })

  }


  cadastrar() {

    console.log(this.registerForm.get('nome').value)

    const formData = new FormData();
    formData.append('nome', this.registerForm.get('nome').value);
    formData.append('email', this.registerForm.get('email').value);
    formData.append('cpf', this.registerForm.get('cpf').value);
    formData.append('telefone', this.registerForm.get('telefone').value);
    formData.append('password', this.registerForm.get('password').value);
    formData.append('file', 'testeFile');

    console.log(formData);

    this.cadastroService.cadastrar(formData).subscribe((res: any) => {
      console.log(res);
    }, error => {
      console.log(error)
    })

  }


}

The returned value from the console log shows a FormData {}. However, when logging any field from registerForm, the value is displayed correctly. Can anyone suggest what might be causing this issue in constructing the request?

In my Laravel backend, the logFile of the request displays:

[2020-05-29 03:17:25] local.ALERT:
array (
  'data' => 
  array (
  ),
)  

Answer №1

FormData is constantly changing and evolving. Though, its data remains hidden when using the console.log(formData) function. However, you can access and view the data by utilizing the following commands:

console.log(formData.get('name'));
console.log(formData.get('email'));

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

Replacing `any` in TypeScript when combining interfaces

Currently using Express and attempting to explicitly define res.locals. Issue arises as in the @types/express package, Express.Response.locals is declared as any, preventing me from successfully overwriting it: types/express/index.d.ts: declare namespace ...

The Angular ReactiveForm encounters issues with recognizing the parent formGroup directive when working with a recursive template

In my application, I generate formGroups dynamically based on a configuration object that follows this structure: const formElements: FormElementInterface[] = [ { type: 'formControl', defaultIsArray: false, defaultValue: 'Apple&ap ...

Optimizing Angular6 Pipe Filter Performance for Large Arrays

I have written a filter that retrieves a subset of items from a large array consisting of around 500 items. import { Injectable, Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'searchFilter' }) @Inject ...

What is the best way to include a router-link in a button click event in Angular 8?

Can someone please help me with adding a routing function to a button in Angular? I have already included a (click) function on the button, but how do I actually make the function navigate within the home.ts component? <button class="navbut" (click)= ...

The validation for decimal numbers fails to function when considering the length

I've been struggling to come up with a regular expression for validating decimal numbers of a specific length. So far, I've tried using pattern="[0-9]){1,2}(\.){1}([0-9]){2}", but this only works for numbers like 12.12. What I'm aimin ...

Typescript types for the Google Calendar API

Is there anyone out there who can confirm whether the google Calendar API (via the npm package googleapis) for node.js or browser supports types that can be utilized in TypeScript? This would allow for a more strongly typed approach in projects using node ...

The utilization of angular2-materialize is not possible due to an error message indicating that jQuery.easing is undefined

Greetings to all who are taking the time to read this. I am encountering an issue while trying to run ng serve. Here is the error message I am receiving: TypeError: jQuery.easing is undefined Here is a breakdown of what I have done so far: ng new X cd X ...

Moving the starting directory of a NodeJS application on Azure

My NodeJS app on Azure was initially written in Javascript with the app.js file located in the root directory. This file was automatically detected during deployment via Git. Recently, I converted the app to Typescript and now have a build directory, with ...

Angular 6 - Deleting the node_module package to streamline local project modifications

After reviewing our options, we have decided to implement ng2-smart-table for the table grid in our current project. However, we've encountered some limitations with its functionality that do not fully meet our project requirements. As a result, we a ...

How to Dynamically Load SVGs in Angular 10 Without Using IMG or OBJECT Elements

I have been exploring a more streamlined method for loading SVG files without relying on IMG or OBJECT tags, as it limits my ability to control fill colors through external CSS. While using inline SVG seems like the best option, managing numerous component ...

JSX conditionally rendering with an inline question: <option disabled value="">Select an option</option>

Yes, I can confirm that the inline is functioning properly because in the Convert HK to Passive Segment paragraph at the top I am seeing the expected output. What I am aiming for is to display a "Choose a hotel" message when there are multiple hotels in th ...

A unique Angular service that is private and initialized with a specific parameter

My Angular Service (myService) is injected into multiple components and services through their constructors. I want each usage of myService to have its own instance to ensure no data is shared among them. Additionally, I would like myService to be initia ...

Angular: Material Button that Adjusts According to Header Size

How can I adjust the size of a mat-icon to match the header size? Despite my efforts, the arrows remain small. <h1> <button mat-icon-button (click)="testEvent()"> <mat-icon>keyboard_arrow_up</mat-icon> < ...

What is the best way to retrieve information from a sibling state?

The current structure I'm working with includes: --Users --User Table Component --User Filtering State Upon navigating to the Users section, I encounter the User Table Component. My goal is to retrieve an object located within this component usi ...

All components load successfully except for the worker in Webpack

I've been working on configuring webpack to bundle my react project. I successfully set up the webpack_public_path variable and all modules are loading correctly, except for the worker. const path = require('path'); const MonacoWebpackPlugi ...

In Android Kitkat 4.4.4, the Ionic navbar displays icons vertically when using the <ion-buttons end> feature

When viewing in the browser with ionic serve, everything looks fine. However, on an Android Kitkat device running version 4.4.4, the buttons on the right side of the navbar are displaying vertically instead of horizontally. <ion-navbar> <ion-ti ...

Navigational side menu in Ionic

I am having trouble removing an animation from my ionic app. The main issue is that I am not sure how to disable the side bar from opening when swiping on the screen. I only want the side bar to open when clicking the nav-icon, not when swiping on the pa ...

Implementing ng-bootstrap popovers using dynamic data from a database

I am looking to incorporate nb-bootstrap popovers for specific text segments retrieved from a database. While I have successfully integrated ng-popovers in other parts of the code base within the .ts files, attempting to do so with content sourced from th ...

Angular 4 validation triggering the highlighting of control labels

In the process of implementing validation in my Angular 4 application, I have encountered an issue that needs some tweaking. The validation itself is functioning correctly, but I would like to modify the way error messages are displayed. Currently, when ...

The proper approach for managing downloaded d.ts files from DefinitelyTyped after installation through npm

Visual Studio 2017 Enterprise ASP.NET MVC Application TypeScript 2.5 SDK Source control is in TFS I have opted to use Microsoft's built-in property editor instead of creating a custom tsconfig.config file: https://i.sstatic.net/VgcQO.png To streaml ...