尝试在Ionic v4中的模型上提交表单

export class MyFormModel {
  name: string;
  email: string;
  password: string;
}

import { Component } from '@angular/core';
import { MyFormModel } from './my-form.model';

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.scss'],
})
export class MyFormComponent {
  formData: MyFormModel = new MyFormModel();

  onSubmit() {
    // 在这里可以处理表单提交的逻辑
    console.log(this.formData);
  }
}

<form (ngSubmit)="onSubmit()">
  <ion-item>
    <ion-label>Name</ion-label>
    <ion-input [(ngModel)]="formData.name" name="name" required></ion-input>
  </ion-item>

  <ion-item>
    <ion-label>Email</ion-label>
    <ion-input [(ngModel)]="formData.email" name="email" required></ion-input>
  </ion-item>

  <ion-item>
    <ion-label>Password</ion-label>
    <ion-input [(ngModel)]="formData.password" name="password" type="password" required></ion-input>
  </ion-item>

  <ion-button type="submit" expand="full">Submit</ion-button>
</form>

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { MyFormComponent } from './my-form.component';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
  ],
  declarations: [MyFormComponent],
})
export class MyFormModule { }