Question

我正在使用离子4.12。我的表单具有以下代码：

<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>

这是ts文件：

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");
  }
}

按下提交按钮时，控制台中不会记录任何内容。我认为ts文件中的may方法在视图中不可用。当我尝试<button (click)="test">test</button>并将一个名为test的方法设置为console.log时，什么也没有发生。我该如何解决？

Answer 1

我会尝试的几件事：在您的@Component中，我将更改为：

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

还删除@IonicPage()和import { IonicPage, NavController, NavParams } from '@ionic/angular';

进一步将按钮更改为：

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

在ionic 4中提交表格

1 个答案: