CODEWITHSUNDEEP
angularionic-frameworkionic4
Philip7899
Philip7899

Reputation: 4677

submitting a form in ionic 4

I am using ionic 4.12. I have the following code for the form:

<ion-content padding>
    <form  #form="ngForm" (ngSubmit)="submitForm(form)">
      <ion-item>
        <ion-label>Guest Name</ion-label>
        <ion-input  name="guestname" type="text" placeholder="Guest Name" ngModel></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>Host Name</ion-label>
        <ion-input  name="host_name" type="text" placeholder="Host Name" ngModel></ion-input>
      </ion-item>
      <button type="submit" block ion-button>Register Guest</button>
    </form>
</ion-content>

and here is the ts file:

import { Component, OnInit } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
  selector: 'page-register-guest',
  templateUrl: 'register-guest.html',
})
export class RegisterGuestPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {

  }
  public submitForm(form){
    console.log("form submitted YAY");
  }
}

When pressing the submit button, nothing is logged in the console. I think the maybe methods from the ts file are not accesible in the view. When I try <button (click)="test">test</button> and setup a method called test to just console.log, nothing happens. How should I fix this?

Upvotes: 2

Views: 5902

Answers (1)

benra
benra

Reputation: 396

A couple things I would try: In your @Component I would change to this:

@Component({
  selector: 'page-register-guest',
  templateUrl: './register-guest.html',
})

Also delete @IonicPage() and import { IonicPage, NavController, NavParams } from '@ionic/angular';

Furthermore change your button to:

<ion-button type="submit" expand="block">Register Guest</ion-button>

Upvotes: 2

Related Questions