在ionic 4中提交表单

<!-- form.component.html -->
<form (ngSubmit)="onSubmit()" #form="ngForm">
  <ion-item>
    <ion-label>Name</ion-label>
    <ion-input type="text" [(ngModel)]="name" name="name" required></ion-input>
  </ion-item>
  <ion-item>
    <ion-label>Email</ion-label>
    <ion-input type="email" [(ngModel)]="email" name="email" required></ion-input>
  </ion-item>
  <ion-button type="submit" [disabled]="!form.form.valid">Submit</ion-button>
</form>

// form.component.ts
import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.scss'],
})
export class FormComponent {
  name: string;
  email: string;

  onSubmit(form: NgForm) {
    if (form.valid) {
      console.log('Form submitted!', form.value);
      // 这里可以添加将数据发送到服务器的逻辑
    }
  }
}

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

onSubmit(form: NgForm) {
  if (form.valid) {
    this.http.post('/api/submit', form.value).subscribe(response => {
      console.log('Server response:', response);
    }, error => {
      console.error('Error submitting form:', error);
    });
  }
}