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

How can we use Angular Table to automatically shift focus to the next row after we input a value in the last cell of the current row and press the Enter key

When the last cell of the first row is completed, the focus should move to the next row if there are no more cells in the current row. <!-- HTML file--> <tbody> <tr *ngFor="let row of rows;let i=index;" [c ...

The timezone plugin in day.js may sometimes generate an incorrect date

For a while, I've been using dayjs in my angular project to convert timestamps from UTC to localtime. However, after my recent update, this functionality stopped working. This isn't the first issue I've encountered with dayjs, so I decided t ...

Service error: The function of "method" is not valid

In one of my Angular 2 applications, I have a class that contains numerous methods for managing authentication. One particular method is responsible for handling errors thrown by the angular/http module. For example, if a response returns a status code o ...

Utilizing dynamic arguments in TypeScript to recycle types

Can I accomplish this with TypeScript? Here is the source code I currently have: interface FormStore<T> { type: T; } interface Form<T> extends FormStore<T> { email: T; phone: T; password: T; } interface FormState<R> { fo ...

Combining two arrays in React using TypeScript and showcasing them in a single list display

I am working on a React TypeScript project and have two comma-separated strings that I am converting into arrays. One array contains the file names, and the other contains the file link paths. My goal is to merge the two arrays so that the first item in th ...

Switch app engines in real-time based on the URL path with express framework

How can I dynamically set App Engine based on the URL? In my application, I have two render engines available: serverSideRenderEngine & browserRenderEngine If the URL is /home, the app.engine should be set as serverSideRenderEngine If the URL is /l ...

Angular 2+ seems to be failing to detect and update changes in variables within the template

I have a component that includes rendering the user's name from the profile object. The corresponding part of the template looks like this: <button mat-button [matMenuTriggerFor]="userMenu" *ngIf="isAuthenticated()"> {{profile?.name} ...

Angular 6 - Outdated Functions

I'm having trouble updating the request options as they are now deprecated. I can't seem to locate the alternative option for this. Can anyone offer some assistance? import { Injectable } from '@angular/core'; import { HttpClient } fr ...

Incorporating marker tags to different sections of text within a contenteditable div

The main objective of this feature is to enable users to select placeholders within message templates (variable names enclosed in %). Inspired by Dribbble The API provides strings in the following format: "Hello %First_Name% %Middle_Name% %Last_Name% ...

Having trouble binding component property in VueJS with TypeScript?

Why is my component property not binding when I set the related component attribute to a value? Even when inspecting with Vue devtools or outputting the value into the HTML, it remains at the default value set on the component. I tried setting a string at ...

Tips for assigning a JSON object as the resolve value and enabling autosuggestion when utilizing the promise function

Is there a way to make my promise function auto-suggest the resolved value if it's a JSON object, similar to how the axios NPM module does? Here is an example of how axios accomplishes this: axios.get("url.com") .then((res) => { Here, axios will ...

Exploring subobjects while fetching observables (typescript/angular)

When retrieving JSON from an API into an Angular service, I am working with a collection of objects structured like this: { "data": { "id": 1, "title": "one" }, "stats" : { "voteCount": 8 } } I am particularly interested in the ' ...

What is the rationale behind TypeScript's decision to permit omission of "this" in a method?

The TypeScript code below compiles without errors: class Something { name: string; constructor() { name = "test"; } } Although this code compiles successfully, it mistakenly assumes that the `name` variable exists. However, when co ...

A data type labeled as 'undefined' needs to include a method called '[Symbol.iterator]()' which will then return an iterator

I've been working on converting my reducer from JavaScript to TypeScript, but I keep encountering a strange error that I can't seem to resolve. The issue arises when I attempt to use ellipsis for array deconstruction in the reducer [...state.mess ...

Exploring the zoom functionality and tooltip features of Area Range charts in Highcharts

I need help with a couple of things on the high charts area range chart: I am trying to enable zooming into the y-axis of the chart, but I am facing difficulties. Can anyone suggest how this can be achieved? Below is the link to my jsfiddle with the sam ...

Encountered an error while setting up a new Angular project: Installation of

Angular CLI: 8.3.8 Node: 10.16.3 OS: darwin x64 Angular: ... Package Version ------------------------------------------------------ @angular-devkit/architect 0.803.8 @angular-devkit/core 8.3.8 @angular-devkit/schematics ...

Setting multiple route parameters for a single segment

Let's jump right into the problem at hand. Is there a way to define multiple route parameters for one segment as shown in the route below: The Routes: { path: 'planlist/:departure_:destination/:date', component: ReservationComponen ...

The method toLowerCase is not found on this data type in TypeScript

I am currently working on creating a filter for autocomplete material. Here is an example of my model: export class Country { country_id: number; name: string; } When calling the web method ws: this.ws.AllCountry().subscribe( ...

Why is it that TypeScript struggles to maintain accurate type information within array functions such as map or find?

Within the if block in this scenario, the p property obtains the type of an object. However, inside the arrow function, it can be either an object or undefined. const o: { p?: { sp?: string } } = { p: {} } if (o.p) { const b = ['a'].map(x => ...

Is there a way to import TypeScript modules from node_modules using browserify?

After successfully running tsc, I am facing difficulty understanding how to import TypeScript modules from node modules. The crucial section of my gulp file is as follows: gulp.task('compile-ts', ['clean'], function(){ var sourceTsF ...