Alert created with Ionic framework does not support the addition of a checkbox and text field in the same alert

I'm having trouble adding input text fields and checkboxes to my alert. Can someone help me fix it?

I need to display text box and checkbox fields in my alert.

Here is my code:

doPrompts() {
    let prompt = this.alertCtrl.create({
      title: 'Add new add-on',
      message: "",

      inputs: [
        {

          placeholder: 'Select category',

        },
        {
          placeholder: 'Description',


        },
        {
          placeholder: 'Units',


        },
        {
          placeholder: '$ 00.00',


        }
      ],

      buttons: [
        {
          text: 'Cancel',
          handler: data => {
            console.log('Cancel clicked');
          }
        },
        {
          text: 'Add',
          handler: data => {
            console.log('Saved clicked');
          }
        }
      ]
    });
    prompt.present();
  }

Answer №1

It has been intentionally designed this way. For more information, please refer to the documentation.

Alerts can contain different types of inputs that allow users to input data back to the app. Inputs serve as a convenient tool for requesting information from users. While radios, checkboxes, and text inputs are all supported, they cannot be mixed together in one alert.

If you require a form with various input types, you will need to create a separate component containing a form with both text box input and select input, then display it as a modal.

let modal = this.modalCtrl.create(SelectForm);
modal.present();

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

Passing a variable from the second child component to its parent using Angular

Need help with passing variables between two child components Parent Component: deposit.component.html <div> <app-new-or-update-deposit [(isOpenedModal)]="isOpenedModal"></app-new-or-update-deposit> </div> Deposit Component ...

Divide the list of commitments into separate groups. Carry out all commitments within each group simultaneously, and proceed to the next group

My Web Crawling Process: I navigate the web by creating promises from a list of website links. These promises act as crawlers and are executed sequentially. For instance, if I have 10 links, I will crawl the first link, wait for it to complete, then move ...

Updating disabled date picker appearance in Angular Material Design

I am currently developing a website using Angular Material. One of the components I am working with is a date picker. The issue I am facing is that the date picker has the popup functionality enabled, but the input itself is disabled, causing a dotted line ...

Running lint-staged on an Angular monorepo

I am facing challenges while setting up lint-staged in my Angular monorepo workspace. Despite multiple attempts, I have been unsuccessful in making it work properly. When the command ng lint --files is executed with a changed file, an error stating that *f ...

Show Data from API on Angular 6 Webpage

Hello everyone, I am a beginner in the world of frontend development and I'm currently facing a challenge with displaying API data in an Angular 6 application. I have managed to showcase values from the main level of the returned details, but I am str ...

Issues with color scheme in Angular Material 18

While using (ng generate @angular/material:my--own-theme), I came across some code in own-theme.scss. Surprisingly, this code works for the palette included in Angular Material, but I prefer to use my own theme. Here's what was generated and what I di ...

Tips on sorting an array within a map function

During the iteration process, I am facing a challenge where I need to modify certain values based on specific conditions. Here is the current loop setup: response.result.forEach(item => { this.tableModel.push( new F ...

TypeScript type that accommodates all object interfaces

I have several functions that all take the same type as input but return different types of interfaces. I'd like to define a type that can encompass all these functions, but when I try to do so with: const f: (arg: number) => Object = func; I enc ...

ReplaySubject in Angular is failing to update the array when a new object is added

I am encountering an issue where, upon attempting to create a new page Object, it successfully sends the data to the backend but does not update the array. I have to refresh the page in order to view the entire array. Within the frontend, I am utilizing O ...

Issue with hydration when logging in with Next-Auth in NextJS 13.4

Step-by-step Instructions: 'node -v' -> v18.16.1 'npx -v' -> 9.8.0 To start, I created a new Next.js app by running npx create-next-app@latest in the terminal within my app folder. Here is a link to the package.json file. Nex ...

Restrict the loop in handlebarjs

If we are working in the context of C#, and we have a list of people like this: List<people> lst = new List<people>(); lst.add(new people{Name='mark'}); lst.add(new people{Name='james'}); lst.add(new people{Name='antho ...

What is the best method for expanding nodes after the tree has been loaded?

Greetings! I am currently working on a web application using Angular 5. One of the features I have implemented is loading trees onto my webpage. These trees are populated with data from an API and are designed to be dynamic. After loading the tree, my goal ...

The struggle of implementing useReducer and Context in TypeScript: A type error saga

Currently attempting to implement Auth using useReducer and Context in a React application, but encountering a type error with the following code snippet: <UserDispatchContext.Provider value={dispatch}> The error message reads as follows: Type &apos ...

Implement method functionality within TypeScript interfaces

I've encountered a scenario where I have an interface that will be utilized by multiple classes: interface I { readonly id: string; process(): void; } My objective is to pass the id through a constructor like so: class A implements I {...} let a: ...

What is the best way to provide type arguments to an indexed type in Typescript?

I need assistance with determining the return type of a generic function within a class. For instance, declare class Example { open<T, R>(t1: T, t2: R): T | R; } type ExampleType<T, R> = (Example['open'])<T, R>; type Exa ...

Angular: Converting this code into a loop - A step-by-step guide

Currently, I am in the process of learning Angular along with its Angular Material UI Framework. Following the installation of dependencies, I created a Material Rank Table using the command below: ng generate @angular/material:table rank-table --module=ap ...

Transferring information from ag-Grid to a different user interface

I have implemented ag-Grid to showcase some data and now I want this data to be transferred to another interface upon clicking a cell in the grid. To achieve this, I utilized the cellRendererFramework by creating a custom component called RouterLinkRendere ...

What is the best method for bringing a JSON file into an Angular library?

Struggling with importing a JSON file into my Angular 7 environment file within a library. The contents of my environment.ts file are as follows: import firebase from './firebase.json'; export const environment = { production: false, fireba ...

The system does not acknowledge 'NODE_OPTIONS' as a command that can be used internally or externally, or as an operational program or batch file

While trying to build my react + vite project, I encountered an error after running npm run build. https://i.stack.imgur.com/XfeBe.png Here is a snapshot of my package.json file. https://i.stack.imgur.com/MbbmY.png ...

Trigger a class method in an event using Angular with Typescript

I am completely new to TypeScript and Angular, and I am attempting to create a basic drawing component on a canvas. However, I have reached a point where I feel lost and confused about my code. The concept of "this" in TypeScript has been a major stumbling ...