Angular 2+ 材质 mat-chip-list formArray 验证

typescript

# Angular 2+ 材质中的 mat-chip-list 和 formArray 验证

Angular 2+ 框架为开发者提供了一系列强大的工具和组件，其中包括 Angular Material 库，该库为开发者提供了一套美观且易于使用的 UI 组件。在本文中，我们将探讨如何结合 Angular 2+ 中的材质组件 mat-chip-list 和表单数组 formArray 进行验证，以实现更加灵活和可靠的表单控制。

## 引言

在许多应用程序中，我们经常需要处理用户输入的数据，而表单是这一过程中不可或缺的一部分。Angular 提供了强大的表单模块，让开发者能够轻松地构建和验证用户输入。其中，mat-chip-list 是 Angular Material 中的一个组件，它允许用户通过芯片（chips）的形式输入一系列项目。而 formArray 则是 Angular 中的一个表单控件，用于管理动态增减的表单控件集合。

## 使用 mat-chip-list 和 formArray

首先，我们需要导入 Angular Material 中的 MatChipsModule 模块，以及 Angular 中的 FormBuilder 和 Validators。接下来，我们可以在组件中使用 FormBuilder 创建一个 formArray，并将其与 mat-chip-list 组件关联起来。

typescript
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'app-chip-list',
  templateUrl: './chip-list.component.html',
  styleUrls: ['./chip-list.component.CSS']
})
export class ChipListComponent {
  chipForm: FormGroup;
  constructor(private fb: FormBuilder) {
    this.chipForm = this.fb.group({
      chipArray: this.fb.array([], Validators.required)
    });
  }
}

在模板文件中，我们可以使用 formArrayName 指令将 mat-chip-list 与我们创建的表单数组关联起来。

html
<form [formGroup]="chipForm">
  <mat-chip-list formArrayName="chipArray">
    <mat-chip *ngFor="let chip of chipForm.get('chipArray').controls"</p>              [selectable]="true"
              [removable]="true"
              (removed)="removeChip(chip)">
      {{ chip.value }}
      <mat-icon matChipRemove>cancel</mat-icon>
    </mat-chip>
    <input matInput [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"</p>           (matChipInputTokenEnd)="addChip($event)" placeholder="添加项目">
  </mat-chip-list>
</form>

## 表单验证

为了使我们的表单更具健壮性，我们可以添加一些验证规则。在上述代码中，我们使用了 Validators.required，表示 chipArray 是一个必填字段。我们还可以根据需要添加其他验证规则，例如最小长度、最大长度等。

typescript
this.chipForm = this.fb.group({
  chipArray: this.fb.array([], [Validators.required, Validators.minLength(2)])
});

##

通过结合 Angular 2+ 中的 mat-chip-list 和表单数组 formArray，我们可以创建一个动态且具有强大验证功能的用户输入表单。这不仅使用户能够方便地输入多个项目，还能确保输入的数据符合我们的业务需求。

在实际应用中，我们可以根据具体情况进一步扩展和定制这一基础结构，以满足更复杂的表单需求。希望本文能够帮助你更好地理解和应用 Angular 2+ 中的表单验证机制。