21 表单处理之表单控件

在前一章中，我们讨论了如何在Angular中进行表单验证。在本章中，我们将深入探讨Angular的表单控件，包括如何构建和管理表单控件。这将为我们后续在HTTP客户端中使用表单数据打下基础。

理解表单控件

在Angular中，表单控件通常指的是输入元素（如文本框、复选框、单选框等），并且每个控件都包含其自身的状态和数据。当用户与表单交互时，Angular会自动更新这些控件的状态和数据。表单控件可以是响应式的或基于模板的。

创建表单控件

我们可以使用Angular的 FormControl 类来创建表单控件。下面是一个简单的例子，展示了如何在组件中创建一个表单控件。

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-my-form',
  template: `
    <form>
      <label for="name">Name:</label>
      <input id="name" [formControl]="nameControl">
      <p>Your name is: {{ nameControl.value }}</p>
    </form>
  `
})
export class MyFormComponent {
  nameControl = new FormControl('');
}

在上述示例中，我们创建了一个名为 nameControl 的表单控件，并在模板中将它绑定到一个输入框。用户输入的数据会自动更新 nameControl 的值。

表单控件状态

每个表单控件都有几个重要的状态属性：

• valid：控制是否有效。
• invalid：控制是否无效。
• touched：指示控件是否被访问过。
• dirty：指示控件的值是否已被更改。

我们可以使用这些状态来提供用户反馈。例如：

<p *ngIf="nameControl.invalid && (nameControl.touched || nameControl.dirty)">
  Name is required.
</p>

组装多个表单控件

在许多情况下，表单可能会包含多个控件。这时，我们可以使用 FormGroup 类来组合多个 FormControl。以下是一个示例，展示了如何创建一个包含多个控件的表单组。

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-my-form',
  template: `
    <form [formGroup]="myForm">
      <label for="name">Name:</label>
      <input id="name" formControlName="name">

      <label for="email">Email:</label>
      <input id="email" formControlName="email">

      <button (click)="onSubmit()">Submit</button>
    </form>
  `
})
export class MyFormComponent {
  myForm = new FormGroup({
    name: new FormControl(''),
    email: new FormControl('')
  });

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

在这个例子中，我们创建了一个表单组 myForm，它包含两个控件：name 和 email。当用户点击提交按钮时，当前的表单值将被打印到控制台。

表单控件的动态更新

在某些情况下，我们需要动态更新控件的值。我们可以使用 setValue 或 patchValue 方法来实现。这两个方法的区别在于，setValue 要求提供所有控件的值，而 patchValue 允许我们只提供部分控件的值。例如：

this.myForm.setValue({ name: 'John', email: 'john@example.com' });

this.myForm.patchValue({ email: 'john.doe@example.com' });

总结

在本章中，我们了解了如何在Angular中处理表单控件，包括如何创建和管理控件、组合多个控件以及动态更新控件的值。这些技能将为我们后续使用HTTP模块处理表单数据打下良好的基础。

在下一章中，我们将重点讨论如何利用HTTP模块将表单数据发送到服务器，实现与后端的交互。如果你对表单控件有进一步的疑问，可以随时回顾本章内容。让我们期待下一章的内容吧！