Ionic 如何使用表单？

推荐答案

在 Ionic 中使用表单可以通过 Angular 的表单模块来实现。Ionic 提供了 ion-input、ion-select、ion-checkbox 等组件来构建表单。以下是使用 Angular 的模板驱动表单和响应式表单的示例：

模板驱动表单

// www.javascriptcn.com code example
<ion-header>
  <ion-toolbar>
    <ion-title>Template Driven Form</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <form #form="ngForm" (ngSubmit)="onSubmit(form)">
    <ion-item>
      <ion-label>Name</ion-label>
      <ion-input type="text" name="name" ngModel required></ion-input>
    </ion-item>

    <ion-item>
      <ion-label>Email</ion-label>
      <ion-input type="email" name="email" ngModel required></ion-input>
    </ion-item>

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

// www.javascriptcn.com code example
import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-template-driven-form',
  templateUrl: './template-driven-form.page.html',
  styleUrls: ['./template-driven-form.page.scss'],
})
export class TemplateDrivenFormPage {
  onSubmit(form: NgForm) {
    console.log(form.value);
  }
}

响应式表单

// www.javascriptcn.com code example
<ion-header>
  <ion-toolbar>
    <ion-title>Reactive Form</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <form [formGroup]="form" (ngSubmit)="onSubmit()">
    <ion-item>
      <ion-label>Name</ion-label>
      <ion-input type="text" formControlName="name"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label>Email</ion-label>
      <ion-input type="email" formControlName="email"></ion-input>
    </ion-item>

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

// www.javascriptcn.com code example
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-reactive-form',
  templateUrl: './reactive-form.page.html',
  styleUrls: ['./reactive-form.page.scss'],
})
export class ReactiveFormPage implements OnInit {
  form: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
    });
  }

  onSubmit() {
    console.log(this.form.value);
  }
}

本题详细解读

模板驱动表单

模板驱动表单是通过在 HTML 模板中使用 ngModel 指令来绑定表单控件的值。这种方式适合简单的表单场景，表单逻辑主要在模板中定义。

• ngForm: 用于跟踪表单的状态和值。
• ngModel: 用于双向数据绑定，将表单控件的值与组件中的属性绑定。
• ngSubmit: 当表单提交时触发的事件。

响应式表单

响应式表单是通过在组件类中创建表单模型来管理表单的状态和验证。这种方式适合复杂的表单场景，表单逻辑主要在组件类中定义。

• FormGroup: 用于管理一组表单控件的状态和值。
• FormControl: 用于管理单个表单控件的状态和值。
• Validators: 用于定义表单控件的验证规则。

选择哪种方式

• 模板驱动表单：适合简单的表单，逻辑主要在模板中定义，代码量较少。
• 响应式表单：适合复杂的表单，逻辑主要在组件类中定义，灵活性更高。

在实际开发中，可以根据表单的复杂度和需求选择合适的方式。