如何在 Angular 中使用表单？

推荐答案

在 Angular 中使用表单主要有两种方式：模板驱动表单和响应式表单。

模板驱动表单

模板驱动表单依赖于指令在模板中创建和管理表单控件。使用 ngModel 指令来实现双向数据绑定。

// www.javascriptcn.com code example
<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" ngModel required>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" ngModel required email>
  
  <button type="submit" [disabled]="!myForm.valid">Submit</button>
</form>

响应式表单

响应式表单是通过在组件类中显式创建和管理表单控件树来实现的。使用 FormGroup 和 FormControl 类来构建表单。

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

export class MyFormComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]]
    });
  }

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

// www.javascriptcn.com code example
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <label for="name">Name:</label>
  <input type="text" id="name" formControlName="name">
  
  <label for="email">Email:</label>
  <input type="email" id="email" formControlName="email">
  
  <button type="submit" [disabled]="!myForm.valid">Submit</button>
</form>

本题详细解读

模板驱动表单

模板驱动表单适合简单的表单场景，表单逻辑主要在模板中定义。通过 ngModel 指令实现双向数据绑定，表单的状态和验证规则也在模板中定义。

• 优点：简单易用，适合快速开发。
• 缺点：表单逻辑与模板耦合度高，难以处理复杂的表单场景。

响应式表单

响应式表单适合复杂的表单场景，表单逻辑在组件类中定义。通过 FormGroup 和 FormControl 类来构建表单，表单的状态和验证规则在组件类中定义。

• 优点：表单逻辑与模板解耦，适合处理复杂的表单场景。
• 缺点：需要更多的代码，学习曲线较高。

选择依据

• 模板驱动表单：适合简单的表单场景，快速开发。
• 响应式表单：适合复杂的表单场景，需要更多的控制和灵活性。

注意事项

• 在使用模板驱动表单时，确保每个表单控件都有 name 属性。
• 在使用响应式表单时，确保在模板中使用 formControlName 或 formGroupName 来绑定表单控件。
• 表单验证是表单开发中的重要部分，确保为每个表单控件添加适当的验证规则。