Angular中的FormControl、FormGroup和FormArray的区别

在使用Angular构建表单时，我们经常会使用FormControl、FormGroup和FormArray。虽然它们都用于处理表单数据，但它们在功能和使用上有一些区别。

1. FormControl:

FormControl是最简单的表单控件，它与单个表单输入字段相对应。它负责跟踪、验证和更新单个输入字段的值。以下是FormControl的基本使用示例：

typescript 复制代码

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

// 创建一个 FormControl 实例
const nameControl = new FormControl('', Validators.required);

// 获取和更新 FormControl 的值
console.log(nameControl.value); // 获取值
nameControl.setValue('John');   // 设置值

2. FormGroup:

FormGroup用于表示一组相关的表单控件，它可以包含多个FormControl、FormGroup或FormArray。它将这些表单控件组织在一起，并提供对整个表单组的验证和值的访问。以下是FormGroup的基本使用示例：

typescript 复制代码

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

// 创建一个 FormGroup 实例
const formGroup = new FormGroup({
  name: new FormControl('', Validators.required),
  age: new FormControl('', Validators.min(18))
});

// 获取和更新 FormGroup 中的值
console.log(formGroup.value); // 获取整个 FormGroup 的值
formGroup.patchValue({ name: 'John' }); // 只更新指定字段的值

3. FormArray:

FormArray用于处理表单项的可变数组，每个表单项可以是FormControl、FormGroup或FormArray。它负责跟踪、验证和更新表单项的值，并提供添加和删除表单项的功能。以下是FormArray的基本使用示例：

typescript 复制代码

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

// 创建一个 FormArray 实例
const formArray = new FormArray([
  new FormControl('', Validators.required),
  new FormControl('', Validators.email)
]);

// 获取和更新 FormArray 中的值
console.log(formArray.value); // 获取 FormArray 的值
formArray.push(new FormControl('')); // 添加一个新的 FormControl

应用

使用FormControl来跟踪和验证单个输入字段的值；
使用FormGroup将多个相关的表单控件组织在一起，并提供对整个表单组的验证和值的访问；
使用FormArray处理表单项的可变数组，每个表单项可以是FormControl、FormGroup或FormArray。

通过合理使用这三个表单控件，我们可以更好地管理和操作表单数据。

html 复制代码

<h2>formControl</h2>
<form (ngSubmit)="onSubmit2()">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" [formControl]="nameControl">
  </div>
  <div *ngIf="nameControl.invalid && (nameControl.dirty || nameControl.touched)">
    <div *ngIf="nameControl.errors?.required">Name is required.</div>
  </div>
  <button type="submit" [disabled]="nameControl.invalid">Submit</button>
</form>
<h2>formGroup</h2>
<form [formGroup]="formGroup" (ngSubmit)="onSubmit3()">
  <div>
    <label for="name">Name:</label>
  <input type="text" id="name" formControlName="name">
  </div>
  <div *ngIf="formGroup.controls.name.invalid && 
              (formGroup.controls.name.dirty || formGroup.controls.name.touched)">
    <div *ngIf="formGroup.controls.name.errors?.required">Name is required.</div>
  </div>
 <div>
  <label for="email">Email:</label>
  <input type="email" id="email" formControlName="email">
 </div>
  <div *ngIf="formGroup.controls.email.invalid && 
              (formGroup.controls.email.dirty || formGroup.controls.email.touched)">
    <div *ngIf="formGroup.controls.email.errors?.required">Email is required.</div>
    <div *ngIf="formGroup.controls.email.errors?.email">Invalid email format.</div>
  </div>
  <button type="submit" [disabled]="formGroup.invalid">Submit</button>
</form>


<h2>FormArray</h2>

<form [formGroup]="formGroup4" (ngSubmit)="onSubmit4()">
  <div formArrayName="items" *ngFor="let item of itemControls.controls; let i = index">
    <div [formGroupName]="i">
      <div><input formControlName="name" placeholder="Name"></div>
      <div *ngIf="item.get('name')?.invalid && (item.get('name')?.dirty || item.get('name')?.touched)">
        <div *ngIf="item.get('name')?.errors?.required">Name is required.</div>
      </div>
     <div> <input formControlName="quantity" placeholder="Quantity"></div>
      <div *ngIf="item.get('quantity')?.invalid && (item.get('quantity')?.dirty || item.get('quantity')?.touched)">
        <div *ngIf="item.get('quantity')?.errors?.required">Quantity is required.</div>
      </div>
      <button type="button" (click)="removeItem(i)">Remove</button>
    </div>
  </div>
  <button type="button" (click)="addItem()">Add Item</button>
  <button type="submit" [disabled]="formGroup4.invalid">Submit</button>
</form>

js 复制代码

import { Component } from '@angular/core';
import { FormArray, FormControl, FormGroup } from '@angular/forms';
import { FormBuilder } from '@angular/forms';
import { Validators } from '@angular/forms';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {


  nameControl: FormControl;

  formGroup: FormGroup;


  formGroup4: FormGroup;
  itemControls: FormArray;

  constructor(private formBuilder: FormBuilder) {
    this.nameControl = new FormControl('Tom', Validators.required);
    this.formGroup = new FormGroup({
      name: new FormControl('Ton', Validators.required),
      email: new FormControl('12@app.com', [Validators.required, Validators.email])
    });

    this.itemControls = new FormArray([]);

    this.formGroup4 = new FormGroup({
      items: this.itemControls
    });
  }

  onSubmit2() {
    if (this.nameControl.valid) {
      console.log("Submitted");
    }
  }

  onSubmit3() {
    if (this.formGroup.valid) {
      console.log("Submitted");
      console.log("Name: ", this.formGroup.controls.name.value);
      console.log("Email: ", this.formGroup.controls.email.value);
    }
  }

  addItem() {
    const itemGroup = new FormGroup({
      name: new FormControl('', Validators.required),
      quantity: new FormControl('', Validators.required)
    });

    this.itemControls.push(itemGroup);
  }

  removeItem(index: number) {
    this.itemControls.removeAt(index);
  }

  onSubmit4() {
    if (this.formGroup4.valid) {
      console.log("Submitted");
      console.log("Name: ", this.formGroup4.value);
    }
  }
}

当我们构建表单时，我们需要考虑表单的复杂性和层次结构。在Angular中，FormControl、FormGroup和FormArray被引入来满足这些需求。

FormControl表示单个输入字段，并负责对其进行跟踪、验证和更新。通过使用Validators类，我们可以轻松地应用各种验证规则，如必填、最小长度、最大长度等。例如，我们可以创建一个姓名字段的FormControl：
typescript 复制代码
```
const nameControl = new FormControl('', Validators.required);
```
FormGroup用于组织一组相关的表单控件，可以是FormControl、FormGroup或其他FormArray。FormGroup提供了对整个组的值和验证的访问。例如，我们可以创建一个用户表单，其中包含姓名和电子邮件字段：
typescript 复制代码
```
const userForm = new FormGroup({
  name: new FormControl('', Validators.required),
  email: new FormControl('', Validators.email)
});
```
FormArray用于处理表单项的可变数组。每个表单项可以是FormControl、FormGroup或其他FormArray。FormArray可以用于动态添加或删除表单项，例如添加更多的电话号码或邮寄地址。例如，我们可以创建一个电话号码表单数组：
typescript 复制代码
```
const phoneNumbers = new FormArray([
  new FormControl('', Validators.required)
]);
```

通过合理组合和嵌套使用这些控件，我们可以构建出复杂的表单结构。例如，我们可以在FormGroup中包含FormArray，以构建一个包含多个电话号码的用户信息表单：

typescript 复制代码

const userForm = new FormGroup({
  name: new FormControl('', Validators.required),
  phoneNumbers: new FormArray([
    new FormControl('', Validators.required)
  ])
});

因此，FormControl用于单个输入字段，FormGroup用于组织相关的表单控件，而FormArray用于处理表单项的可变数组。通过灵活使用这些表单控件，我们可以处理各种复杂的表单需求，并轻松地在Angular应用程序中收集、验证和提交表单数据。