Triggering ngSubmit function when button is clicked inside an Ionic alert

My ionic app is up and running, utilizing a template driven form in Angular to gather user input. I'm using ngSubmit to pass this data to my ts.file. My challenge lies in triggering the ngSubmit function through a 'No and save data' button within an alert. The alert function is separate from my html.file, leaving me unsure of how to pass data to the alert function or activate ngSubmit via the alert.

html.file

<form #observeForm="ngForm" (ngSubmit)="onSubmit(observeForm.value)" [(observeForm.value)]="tester">
...
  <ion-button margin-top="auto" expand="block" type="submit" routerDirection="backforward">Confirm</ion-button>
</form>

ts.file

  async presentAlertConfirm() {
    const alert = await this.alertController.create({
      header: 'Time Out!',
      message: 'Do you want to add more observe time?',
      buttons: [
        {
          text: 'Yes',
          cssClass: 'secondary',
          handler: () => {
            this.startTimer();
            console.log('Add time Okay');
          }
        },
          {
          text: 'No and save data',
          role: 'cancel',
          cssClass: 'secondary',
          handler: (blah) => {
            this.timer = 0;
          }
        }
      ]
    });
    await alert.present();
  }

Answer №1

Utilize @ViewChild() for referencing:

@ViewChild('observeForm') obsForm: any; // here is a new line

async presentAlertConfirm() {
const alert = await this.alertController.create({
  header: 'Time Out!',
  message: 'Do you want to add more observe time?',
  buttons: [
    {
      text: 'Yes',
      cssClass: 'secondary',
      handler: () => {
        this.startTimer();
        console.log('Add time Okay');
      }
    },
    {
      text: 'No and save data',
      role: 'cancel',
      cssClass: 'secondary',
      handler: (blah) => {
        this.obsForm.onSubmit(); // another new line
        this.timer = 0;
      }
    }
  ]
});
await alert.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

Using TypeScript to extract types from properties with specific types

My current challenge involves working with a filter object derived from an OpenAPI spec. The structure of this object is illustrated below: export interface Filters { field1: string[] field2: string[] field3: boolean field4: number } My goal is to ...

Progress Bar Modules

I am currently working on creating a customizable animated progress bar that can be utilized as follows: <bar [type]="'health'" [percentage]="'80'"></bar> It is functional up to the point where I need to adjust different p ...

Is it possible to use NG-zorro and Angular material concurrently without encountering any conflicts?

I have encountered an issue with using both the ng-zorro and standalone components libraries in my project at the same time. Running the command "ng add ng-zorro" overrides all of my CSS, causing frustration. I've tried using standalone components ins ...

Demonstration of basic geometric shapes being generated using Forge Viewer Angular

Using the ng2-adsk-forge-viewer library in Angular 7, I am attempting to render a .dmg file within the browser and create a custom geometry on the view. After creating an Extension and adding the addToScene method, while the Extension runs successfully, I ...

What's the best way to maintain the return type of a function as Promise<MyObject[]> when using forEach method?

I am currently working with a function called search, which at the moment is set up to return a type of Promise<MyObject[]>: export function search(args: SearchInput) { return SomeInterface.performSearch(args) .then(xmlRequest =&g ...

How can I use Angular 2 npm start to forward API requests to a different server?

Is there a way to redirect my AJAX requests to another server by using npm start? When attempting npm start --proxy http://localhost:8080, it does not seem to function as intended. ...

Identifying Similar Components in Angular 4: A Guide to Recognizing Rendered Elements

I am working with a clock.component.ts file and a dashboard where I need to display the clock multiple times based on the number of assigned runners for each user. For example, if a user has 3 assigned runners, I need to render the clock component 3 times. ...

Navigating to a child route from a parent component in Angular using the navigate method: A step-by-step guide

Here is the code snippet for my HTML routerLink: <a [routerLink]="['create']">Create</a> - it's working just fine. When I try to call the same on a button click, it doesn't work.. navigateTo(page) { this.router.na ...

Is there a way to compile my Angular application using `npm run build : production` instead of the conventional `npm run build --production` command?

Greetings! My Angular application is currently being built using the following command: npm run build --production Alternatively, it can be built using the command: npm run build -- --c production However, I am interested in building my application using ...

Angular reactive form validation ensures user inputs are accurate and complete before submitting

Within my reactive Angular form, I have a specific field that requires validation. In my service class, I am currently utilizing the default Validators.required function provided by Angular in the following code snippet: Countrycode: new FormControl(&apos ...

What is the best way to implement a dynamic back button in Next.js?

Being familiar with creating a standard back button, I am now eager to craft one that directs the user back by one step in the URL rather than returning to the previous page. This way, I can utilize the button in various locations without needing to alter ...

Error: Can't access the 'http' property because it's undefined in Angular 2

Recently, I successfully integrated the gapi client into my Angular 2 application. However, I am now facing an issue where my http object is showing as undefined and I can't seem to figure out why. Here's the snippet of code that's causing ...

Using Generic Types in TypeScript for Conditional Logic

To better illustrate my goal, I will use code: Let's start with two classes: Shoe and Dress class Shoe { constructor(public size: number){} } class Dress { constructor(public style: string){} } I need a generic box that can hold either a ...

Implement a concealed identification field with React-Admin within a React Native application

I'm currently working on incorporating the SimpleFormIterator from the React-Admin module in order to generate a list of child records within a parent record edit form. After setting up the SimpleFormIterator component with all the necessary details ...

Confirmed the validation of an input that falls outside the parameters of the ReactiveForms model

Check out this StackBlitz example In my Angular application, I am utilizing a Reactive form with 3 inputs, each having its own validation. Additionally, there is an input that exists outside of the form within its own component, also with its own reactive ...

Animating Page Transitions within Ionic 2

In my Ionic 3 application, I have a basic tabs template where I switch between tabs by swiping left or right. Everything works perfectly except there is no animation effect when transitioning between tabs either by tapping or swiping. I am able to achieve ...

React Typescript: Turn off spellchecking

Struggling to turn off spell check for typescript <form> <input type='text' name='accountName' ref={accountName} onChange={checkName} spellCheck='false' // <====== Disable spellche ...

Access the elements within arrays without using the square brackets

I am trying to access data from a list, but I am having trouble using square brackets []. The getTalonPaie function calls the get method from the HttpClient service and returns an observable with multiple values. However, when I try to store these values i ...

Tips for RETRIEVING a particular cookie value in Angular version 14

"I've integrated the ngx-cookie-service library in my Angular project, but I'm experiencing an issue where two different cookies are being retrieved upon login even though the session id is already set in the backend. How can I ensure that m ...

Errors TS2585 and TS2304 encountered during compilation of TypeScript file using Axios

What steps should I take to fix the errors that arise when attempting to compile my TypeScript code using tsc index.ts? node_modules/axios/index.d.ts:75:3 - error TS1165: In an ambient context, a computed property name must reference an expression of lite ...