TypeScript encountered an error with code TS2554, indicating that it was expecting 0 arguments but instead received 1 in an Ionic application

Hello everyone! I'm encountering an issue in my project involving a Type Script error TS2554: Expected 0 arguments, but got 1. This error is preventing me from being able to select other options for custom input pop up. In this forum post, I have shared the typescript code along with the specific error within the code. View the TypeScript error here

Here is the Typescript Code:

 import { Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms';
  import { AlertController } from '@ionic/angular';

  constructor(
    public formBuilder: FormBuilder,
    public alertController: AlertController
  ) { }

      ngOnInit() {
      this.religions = [
          "Islam",
          "Buddha",
          "Hinduism",
          "Christian",
          "Sikhism",
          "Taiosm",
          "Other"
        ];
        
        this.currentReligionValue = "Islam";
      
        this.validations_form = this.formBuilder.group({
        religion: new FormControl(this.currentReligionValue, Validators.required),
    });
    }

      validation_messages = {
    'religion': [
      { type: 'required', message: 'Religion is required to select' },
  };

  //Handling other values
  selectChanged(selected) {
    if (selected === 'Other') {
      this.inputValue();
    } else {
      this.currentvalue = selected;
    };
  };

Specific Error Section in TypeScript Code:

async inputValue() {
        const inputAlert = await this.alertController.create({
          header: 'Enter your custom color:',
          inputs: [ { type: 'text', placeholder: 'type in' } ],
          buttons: [ { text: 'Cancel' }, { text: 'Ok' } ]
        });
      inputAlert.onDidDismiss((data) => { //<-- The error starts here
          let customName: string = data.data.values[0];
          if (customName) {
            let indexFound = this.religions.findIndex(religion => religion === customName)
            if (indexFound === -1) {
              this.religions.push(customName);
              this.currentReligionValue = customName;
            } else {
              this.currentReligionValue = this.religions[indexFound];
            };
          };      
        }).catch(err=>console.log(err));
        await inputAlert.present();
      };

Answer №1

As stated in the official documentation, the method onDidDismiss<T = any>() does not require any parameters.
It provides a Promise of OverlayEventDetail<T> that resolves once the alert has been dismissed.

The code snippet below is expected to function correctly.

const inputAlert = await this.alertController.create({...});
inputAlert.onDidDismiss()
  .then((event: OverlayEventDetail) => event.data...)
  .catch(console.log);

If needed, you can specify the type for better auto-completion when accessing the data within the callback function.

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

Encountered a timeout error of 2000ms while running tests on an asynchronous function within a service

Here is the service I am working with: class MyService { myFunction(param){ return Observable.create(obs => { callsDBfunc(param, (err, res) => { if(err) obs.error(err); ...

Displaying the count of items outside the Angular 2 ngFor loop

As a beginner in Angular, I've encountered a small issue. How can I display the actual number of items outside of an *ngFor loop? Currently, I'm using filter and pagination pipes in this manner: *ngFor="let item of items | filterBy: ['name ...

Differences between useFormState and useForm in Next.js version 14

Currently, I am intrigued by the comparison between using the react hook useForm and the react-dom useFormState. The Nextjs documentation suggests utilizing useFormState, but in practice, many developers opt for the react hook useForm. I am grappling with ...

Error display in Elastic Apm Rum Angular implementation

Having some issues with incorporating the @elastic/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f5948598d8878098d8949b9280999487b5c7dbc4dbc4">[email protected]</a> package into my project. Angular is throwing console ...

Angular2 import functions properly on the Windows operating system, however, it encounters issues on the Linux

import { Injectable } from '@angular/core'; import { Http, Response, Headers } from '@angular/http'; import { Observable } from 'rxjs/Observable'; import { User } from './../../class/User'; I am encountering the fol ...

Utilizing Angular 8's Reactive Form to Transform Checkbox Event Output into a String Format

My form is reactive and includes a field called Status, which can have the values 'A' or 'I': this.form = this.formBuilder.group({ result_info: this.formBuilder.array([ this.getResultcontrols()]), stat ...

In production mode, ExpressJs dispatches the stack efficiently

Before going live, I want to test production simulation with the following setup: package.json "start": "cross-env NODE_ENV=production node dist/index.js", index.ts console.log(process.env.NODE_ENV) // prints "production" ro ...

Attaching dynamic data to a specific element within an array

I have successfully created a demo where elements can be dropped into a specific area and their top and left values are displayed. I have also added functionality to remove dropped items and move them between different blocks. However, I am encountering so ...

Is the variable empty outside of the subscribe block after it's been assigned?

Why is a variable assigned inside subscribe empty outside subscribe? I understand that subscribe is asynchronous, but I'm not sure how to use await to render this variable. Can someone please help me and provide an explanation? I am attempting to retr ...

Issue with deploying lodash library

I'm encountering an issue with lodash. Whenever I deploy using gulp, I consistently receive the following error: vendors.min.js:3 GET http://127.0.0.1/projects/myproject/lodash 404 (Not Found) I have declared the library in my index.html file < ...

Verify the validity of an image URL

I am attempting to create a function in TypeScript that checks the validity of an image source URL. If the URL is valid, I want to display the image using React Native Image. If the URL is invalid, I would like to replace it with a local placeholder imag ...

Can the PrimeNG p-fileUpload component be configured to launch from a specific directory?

Utilizing the PrimeNG p-fileUpload component for file uploads. Looking to customize the default folder that opens when the select file button is clicked. Would like it to open in a specific location such as Desktop or Videos. Is there a method to achieve ...

Is there a way to automatically scroll to the bottom of a div when it first

Looking to enhance my application with a chat feature that automatically scrolls to the bottom of the chat page to display the latest messages. Utilizing VueJs: <template> <div id="app"> <div class="comments" ...

Solving commitments through a series of actions

Can someone please explain why when resolving promises in a loop, accessing the loop variable is necessary for it to work correctly? Here's an example where logging occurs 5 times: for (let i = 0; i < 5; i++) { this.getData() .then(() ...

How can a TypeScript function be used to retrieve a string (or JSON object)?

When attempting to retrieve data from a web API using TypeScript and return the JSON object, encountering an error has left me puzzled. Inside my function, I can successfully display the fetched data on the console, but when I try to return it with return ...

What causes the 401 error to be triggered when utilizing an interceptor?

Working on an Angular 9 Single Page Application that interacts with a JWT-enabled API. Encountering a 401 error when trying to incorporate the provided interceptor. Any insights on what might be causing this issue? It is worth noting that the application ...

The parameter in the Typescript function is not compatible with the generic type

What causes func1 to behave as expected while func2 results in an error? type AnyObj = Record<string, any>; type Data = { a: number; b: string }; type DataFunction = (arg: AnyObj) => any; const func1: DataFunction = () => {}; const arg1: Data ...

"Creating a dynamic TreeList in Ignite UI by linking pairs of names and corresponding

I recently developed a drag and drop tree list inspired by the tutorial on IgniteUI website. The main tree list functions properly, but I encountered an issue with the child nodes displaying as undefined, as illustrated in the image below: This is my Type ...

Incorporating additional properties into a TypeScript interface for a stateless, functional component within a React Native application

When following the React Native documentation for consistent styling, a recommendation is made to create a <CustomText /> text component that encapsulates the native <Text /> component. Although this task seems simple enough, I'm facing d ...

The error message ``TypeError [ERR_UNKNOWN_FILE_EXTENSION]:`` indicates a

I am encountering an error while trying to run the command ./bitgo-express --port 3080 --env test --bind localhost: (node:367854) ExperimentalWarning: The ESM module loader is experimental. internal/process/esm_loader.js:90 internalBinding('errors ...