Angular 中的 FormControl

Question

FormControl 是 Angular Reactive Forms 模块中最基本的构建块之一。它表示表单中的单个输入元素，并用于跟踪输入的值和验证状态。 FormControl 可以独立使用，也可以作为 FormGroup 或 FormArray 的一部分来创建复杂的表单结构。

1. 什么是 FormControl？

FormControl 是一个类，它封装了输入元素的值、状态和验证逻辑。它提供了一系列方法和属性，用于跟踪输入的值、检查验证状态，以及对控件的状态进行更新。

2. 创建 FormControl

你可以单独创建一个 FormControl 实例，或者在 FormGroup 中使用它。下面介绍如何使用 FormControl 。

独立创建 FormControl

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

@Component({
  selector: 'app-simple-control',
  template: `
    <label for="username">Username:</label>
    <input id="username" [formControl]="usernameControl" />
    <div *ngIf="usernameControl.invalid && usernameControl.touched">
      Username is required.
    </div>
    <button (click)="submit()" [disabled]="usernameControl.invalid">Submit</button>
  `
})
export class SimpleControlComponent {
  usernameControl = new FormControl('', Validators.required);

  submit() {
    console.log(this.usernameControl.value);
  }
}

在这个例子中，我们创建了一个独立的 FormControl ，用于跟踪用户名输入字段的值，并添加了一个必填验证器。

在 FormGroup 中使用 FormControl

通常， FormControl 会作为 FormGroup 的一部分来使用，以便管理多个表单控件的值和状态：

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

@Component({
  selector: 'app-user-form',
  template: `
    <form [formGroup]="userForm" (ngSubmit)="onSubmit()">
      <label for="name">Name:</label>
      <input id="name" formControlName="name" />
      <div *ngIf="userForm.get('name')?.invalid && userForm.get('name')?.touched">
        Name is required.
      </div>

      <label for="email">Email:</label>
      <input id="email" formControlName="email" />
      <div *ngIf="userForm.get('email')?.invalid && userForm.get('email')?.touched">
        Invalid email format.
      </div>

      <button [disabled]="userForm.invalid">Submit</button>
    </form>
  `
})
export class UserFormComponent {
  userForm: FormGroup;

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

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

在这里，我们将 FormControl 包含在 FormGroup 中，以便更好地管理整个表单的数据和状态。

3. 常用属性和方法

• value ：获取或设置控件的当前值。
• status ：获取控件的状态，如 VALID 、 INVALID 、 PENDING 。
• valid ：如果控件的值有效，则返回 true 。
• invalid ：如果控件的值无效，则返回 true 。
• errors ：返回控件的错误对象，如果控件没有错误，则返回 null 。
• setValue(value: any) ：严格更新控件的值。
• patchValue(value: any) ：部分更新控件的值。
• reset(value?: any) ：重置控件的值和状态。

4. 设置和获取值

可以通过以下方式设置和获取 FormControl 的值：

// 设置值
this.usernameControl.setValue('JohnDoe');

// 获取值
console.log(this.usernameControl.value); // 输出：JohnDoe

5. 验证状态

FormControl 可以与内置或自定义验证器一起使用，以确保用户输入的值符合预期。例如：

usernameControl = new FormControl('', [Validators.required, Validators.minLength(4)]);

if (this.usernameControl.errors?.['minlength']) {
  console.log('Username must be at least 4 characters long.');
}

小结

• FormControl 是 Angular 中用于跟踪单个输入元素值和状态的核心类。
• 它可以独立使用，也可以作为 FormGroup 或 FormArray 的一部分。
• 提供了多种方法和属性来操作控件的值、状态和验证逻辑。

使用 FormControl 可以让表单控件的数据管理更加简洁和高效，同时能够进行细粒度的状态跟踪和验证。