angular - 在 ionic 4 中提交表单

标签 angular ionic-framework ionic4

我使用的是 ionic 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 文件中的 Maybe 方法在 View 中不可访问。当我尝试 <button (click)="test">test</button>并将一个名为 test 的方法设置为 console.log , 什么都没发生。我该如何解决这个问题?

最佳答案

我会尝试一些事情: 在你的 @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>

关于angular - 在 ionic 4 中提交表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55749200/

相关文章:

angular - 如何将数字分配给类型 'BehaviorSubject<number>'

javascript - Angular2 动画媒体查询

javascript - 使用 event.target.id 时抛出的类型 'id' 上不存在属性 'EventTarget'

ionic-framework - 如何在本地禁用 Ionic AppFlow 监控?

android - ionic 框架 : conditional animation depending on the os

ionic-framework - 在 IONIC 4 中更改圆形 css

ios - 第三方 URL 未登录到 Ionic iOS 中的帐户

javascript - 将数字字符串转换为 Angular 2 中的数字

html - 在 AngularDart 中的 Material 选项卡之间切换会破坏子元素

ionic-framework - ionic 降低滚动速度