Compréhension approfondie des formulaires en angulaire (responsive et basé sur des modèles)

Cet article vous présentera les formulaires dans angular, parlera des formulaires réactifs et des formulaires basés sur des modèles, et présentera comment les formulaires réactifs vérifient la saisie du formulaire. J'espère qu'il sera utile à tout le monde !

1. Introduction aux formulaires angulaires

Angular fournit deux méthodes différentes pour traiter la saisie de l'utilisateur via des formulaires : Formulaires réactifs et Formulaires pilotés par des modèles . Les deux capturent les événements d’entrée utilisateur à partir des vues, valident les entrées utilisateur, créent des modèles de formulaire, modifient les modèles de données et fournissent un moyen de suivre ces modifications. [Tutoriels associés recommandés : "响应式表单和模板驱动表单。 两者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型，并提供跟踪这些更改的途径。【相关教程推荐：《angular教程》】

1.1 响应式表单与模板驱动表单的差异

• 响应式表单提供对底层表单对象模型直接、显式的访问。它们与模板驱动表单相比，更加健壮：它们的可扩展性、可复用性和可测试性都更高。如果表单是你的应用程序的关键部分，或者你已经在使用响应式表单来构建应用，那就使用响应式表单。
• 模板驱动表单依赖模板中的指令Tutoriel angulaire
"]

1.1 La différence entre les formulaires réactifs et les formulaires basés sur des modèles

• Formulaires réactifs fournissent le Le modèle objet de formulaire sous-jacent a un accès direct et explicite. Ils sont plus robustes que les formulaires basés sur des modèles : ils sont plus extensibles, réutilisables et testables. Si les formulaires constituent un élément clé de votre application ou si vous créez déjà votre application à l'aide de formulaires réactifs, utilisez des formulaires réactifs.

Les formulaires basés sur des modèles s'appuient sur des directives dans les modèles pour créer et exploiter le modèle objet sous-jacent. Ils sont utiles pour ajouter un formulaire simple à votre application, tel qu'un formulaire d'inscription à une liste de diffusion. Ils sont faciles à ajouter à une application, mais ne sont pas aussi évolutifs que les formulaires réactifs. Les formulaires basés sur un modèle conviennent si vous avez des besoins de formulaire très basiques et une logique qui peut être gérée uniquement dans un modèle.

AdaptatifPiloté par un modèleConstruire un modèle de formulaireExplicitement, créé dans la classe de composantImplicitement, créé par des instructionsModèle de données...

1.2 Créer un modèle de formulaire

Les formulaires réactifs et les formulaires basés sur des modèles suivent les changements de valeur entre les éléments d'entrée du formulaire avec lesquels l'utilisateur interagit et les données du formulaire dans le modèle de composant. Les deux méthodes partagent le même ensemble sous-jacent de blocs de construction, uniquement dans la manière de créer et de gérer les instances de contrôle de formulaire couramment utilisées. > Il y a une différence. 构建块，只在如何创建和管理常用表单控件实例方面有所不同。

1.3 常用表单基础类

响应式表单和模板驱动表单都建立在下列基础类之上。

• FormControl 实例用于追踪单个表单控件的值和验证状态。
• FormGroup 用于追踪一个表单控件组的值和状态。
• FormArray 用于追踪表单控件数组的值和状态。
• ControlValueAccessor 用于在 Angular 的 FormControl 实例和原生 DOM 元素之间创建一个桥梁。

二、 响应式表单

响应式表单使用显式的、不可变的方式，管理表单在特定的时间点上的状态。对表单状态的每一次变更都会返回一个新的状态，这样可以在变化时维护模型的整体性。响应式表单是围绕 Observable 流构建的，表单的输入和值都是通过这些输入值组成的流来提供的，它可以同步访问。

2.1 添加基础表单控件

使用表单控件有三个步骤。

• 在你的应用中注册响应式表单模块。该模块声明了一些你要用在响应式表单中的指令。

• 生成一个新的 FormControl 实例，并把它保存在组件中。

• 在模板中注册这个 FormControl。

要使用响应式表单控件，就要从 @angular/forms 包中导入 ReactiveFormsModule，并把它添加到你的 NgModule 的 imports 数组中。

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // other imports ...
    ReactiveFormsModule
  ],
})
export class AppModule { }

要注册一个表单控件，就要导入 FormControl 类并创建一个 FormControl 的新实例，将其保存为类的属性。

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

@Component({
  selector: 'app-name-editor',
  templateUrl: './name-editor.component.html',
  styleUrls: ['./name-editor.component.css']
})
export class NameEditorComponent {
  name = new FormControl('');
}

可以用 FormControl 的构造函数设置初始值，这个例子中它是空字符串。通过在你的组件类中创建这些控件，你可以直接对表单控件的状态进行监听、修改和校验。

在组件类中创建了控件之后，你还要把它和模板中的一个表单控件关联起来。修改模板，为表单控件添加 formControl 绑定，formControl 是由 ReactiveFormsModule 中的 FormControlDirective 提供的。

<label>
  Name:
  <input type="text" [formControl]="name">
</label>

2.2 显示表单控件的值

你可以用下列方式显示它的值：

• 通过可观察对象 valueChanges，你可以在模板中使用 AsyncPipe 或在组件类中使用 subscribe() 方法来监听表单值的变化。
• 使用 value 属性。它能让你获得当前值的一份快照。

<label>
  Name:
  <input type="text" [formControl]="name">
</label>
Value: {{ name.value }}

  public name = new FormControl('test');

  public testValueChange() {
    this.name.valueChanges.subscribe({
      next: value => {
        console.log("name value is: " + value);
      }
    })
  }

2.3 替换表单控件的值

响应式表单还有一些方法可以用编程的方式``修改控件的值，它让你可以灵活的修改控件的值而不需要借助用户交互。FormControl 提供了一个 setValue() 方法，它会修改这个表单控件的值，并且验证与控件结构相对应的值的结构。比如，当从后端 API 或服务接收到了表单数据时，可以通过 setValue() 方法来把原来的值替换为新的值。

updateName() {
  this.name.setValue('Nancy' + new Date().getTime());
}

<p>
  <button (click)="updateName()">Update Name</button>
</p>

2.4 把表单控件分组

表单中通常会包含几个相互关联的控件。响应式表单提供了两种把多个相关控件分组到同一个输入表单中的方法。

• 表单组定义了一个带有一组控件的表单，你可以把它们放在一起管理。表单组的基础知识将在本节中讨论。你也可以通过嵌套表单组来创建更复杂的表单。
• 表单数组定义了一个动态表单，你可以在运行时添加和删除控件。你也可以通过嵌套表单数组来创建更复杂的表单

要将表单组添加到此组件中，请执行以下步骤。

• 创建一个 FormGroup

1.3 Classes de base de formulaires couramment utilisées

• Les formulaires réactifs et les formulaires basés sur des modèles sont tous deux construits sur les classes de base suivantes.
• Les instances FormControl sont utilisées pour suivre les valeurs et l'état de validation des contrôles de formulaire individuels.
  FormGroup est utilisé pour suivre les valeurs et l'état d'un groupe de contrôle de formulaire.
FormArray est utilisé pour suivre les valeurs et les états des tableaux de contrôle de formulaire.

ControlValueAccessor est utilisé pour créer un pont entre l'instance FormControl d'Angular et les éléments natifs du DOM.

🎜

🎜 2. Formulaires réactifs 🎜

🎜Les formulaires réactifs utilisent une manière explicite et immuable pour gérer l'état du formulaire à un moment précis. Chaque modification de l'état du formulaire renvoie un nouvel état, préservant ainsi l'intégrité du modèle à mesure qu'il change. Les formulaires réactifs sont construits autour de flux Observables. Les entrées et les valeurs du formulaire sont fournies via un flux de ces valeurs d'entrée, accessible de manière synchrone. 🎜🎜🎜2.1 Ajouter des contrôles de formulaire de base🎜🎜🎜Il y a trois étapes pour utiliser les contrôles de formulaire. 🎜

🎜🎜Enregistrez le module de formulaire réactif dans votre application. Ce module déclare certaines directives que vous souhaitez utiliser dans les formulaires réactifs. 🎜🎜🎜🎜Générez une nouvelle instance FormControl et enregistrez-la dans le composant. 🎜🎜🎜🎜Enregistrez ce FormControl dans le modèle. 🎜🎜🎜🎜🎜Pour utiliser des contrôles de formulaire réactifs, importez ReactiveFormsModule à partir du package @angular/forms et ajoutez-le au tableau d'importations de votre NgModule. 🎜

import { FormControl, FormGroup } from '@angular/forms';
  profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
  });
  // 可以整个获取值
  public onSubmit() {
    // TODO: Use EventEmitter with form value
    console.warn(this.profileForm.value);// {firstName: "", lastName: ""}
  }
      // 可以借助 valueChanges 整个可观察对象整个获取值
     this.profileForm.valueChanges.subscribe( {
      next: value => {
        console.log("name value is: " + JSON.stringify(value)); // dashboard.component.ts:53 name value is: {"firstName":"dddd","lastName":"bb"}
      }
    })

    // 可以通过后期单个控件单独获取值
    this.profileForm.get('firstName').valueChanges.subscribe({
      next: value => {
        console.log("First Name is: " + value); // First Name is: aa
      }

🎜🎜Pour enregistrer un contrôle de formulaire, importez la classe FormControl et créez une nouvelle instance de FormControl, en l'enregistrant en tant que propriété de la classe. 🎜

<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
 
  <label>
    First Name:
    <input type="text" formControlName="firstName">
  </label>

  <label>
    Last Name:
    <input type="text" formControlName="lastName">
  </label>

  <button type="submit" [disabled]="!profileForm.valid">Submit</button>
</form>

🎜Vous pouvez utiliser le constructeur de FormControl pour définir la valeur initiale, dans ce cas il s'agit d'une chaîne vide. En créant ces contrôles dans votre classe de composant, vous pouvez directement surveiller, modifier et vérifier l'état du contrôle de formulaire. 🎜🎜🎜Après avoir créé le contrôle dans la classe du composant, vous devez l'associer à un contrôle de formulaire dans le modèle. Modifier le modèle et ajouter la liaison formControl au contrôle de formulaire formControl est fourni par FormControlDirective dans ReactiveFormsModule. 🎜

  public profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
    address: new FormGroup({
      street: new FormControl(''),
      city: new FormControl(''),
      state: new FormControl(''),
      zip: new FormControl('')
    })
  });
    // 可以借助 valueChanges 整个可观察对象整个获取值
    this.profileForm.valueChanges.subscribe( {
      next: value => {
        console.log("name value is: " + JSON.stringify(value));// name value is: {"firstName":"","lastName":"","address":{"street":"b","city":"","state":"","zip":""}}
      }
    });

    // 可以通过后期单个控件单独获取值
    this.profileForm.get('firstName').valueChanges.subscribe({
      next: value => {
        console.log("First Name is: " + value);
      }
    });

    // 可以获取form组件某个form组的整个值
    this.profileForm.get('address').valueChanges.subscribe(({
      next: value => {
        console.log('address value is: ' + JSON.stringify(value));// address value is: {"street":"b","city":"","state":"","zip":""}
      }
    }));

    // 可以获取form组件某个form组的某个formcontrol实例的值
    this.profileForm.get('address').get('street').valueChanges.subscribe(({
      next: value => {
        console.log('street value is: ' + value);// street value is: b
      }
    }));

🎜🎜2.2 Afficher la valeur d'un contrôle de formulaire 🎜🎜🎜Vous pouvez afficher sa valeur des manières suivantes : 🎜
🎜Avec les valueChanges observables, vous pouvez l'afficher dans le modèle Utilisez AsyncPipe ou utilisez la méthode subscribe() dans la classe de composant pour écouter les modifications dans les valeurs du formulaire. 🎜🎜Utilisez l'attribut value. Il vous permet d'obtenir un instantané de la valeur actuelle. 🎜🎜

      <form [formGroup]="profileForm" (ngSubmit)="onSubmit()">

        <label>
          First Name:
          <input type="text" formControlName="firstName">
        </label>

        <label>
          Last Name:
          <input type="text" formControlName="lastName">
        </label>
        <div formGroupName="address">
          <h3>Address</h3>

          <label>
            Street:
            <input type="text" formControlName="street">
          </label>

          <label>
            City:
            <input type="text" formControlName="city">
          </label>

          <label>
            State:
            <input type="text" formControlName="state">
          </label>

          <label>
            Zip Code:
            <input type="text" formControlName="zip">
          </label>
        </div>
        <button type="submit" [disabled]="!profileForm.valid">Submit</button>
      </form>

  public updateProfile() {
      // profileForm 模型中只有 firstName 和 street 被修改了。注意，street 是在 address 属性的对象中被修改的。这种结构是必须的，因为 patchValue() 方法要针对模型的结构进行更新。patchValue() 只会更新表单模型中所定义的那些属性。
    this.profileForm.patchValue({
      firstName: 'Nancy' + new Date().getTime(),
      address: {
        street: '123 Drew Street' + new Date().getTime()
      }
    });

    // ERROR Error: Must supply a value for form control with name: 'lastName'.
    // setValue() 方法会严格遵循表单组的结构
    this.profileForm.setValue({
      firstName: 'Nancy' + new Date().getTime(),
      address: {
        street: '123 Drew Street' + new Date().getTime()
      }
    });
  }

🎜🎜2.3 Remplacer la valeur du contrôle de formulaire 🎜🎜🎜Les formulaires réactifs ont également des méthodes pour `` modifier la valeur du contrôle par programme, ce qui vous permet de modifier de manière flexible la valeur du contrôle sans le besoin d’interaction avec l’utilisateur. FormControl fournit une méthode setValue(), qui modifiera la valeur de ce contrôle de formulaire et vérifiera la structure de la valeur correspondant à la structure du contrôle. Par exemple, lorsque les données d'un formulaire sont reçues d'une API ou d'un service backend, la valeur d'origine peut être remplacée par une nouvelle valeur via la méthode setValue(). 🎜

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

  public profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
    address: new FormGroup({
      street: new FormControl(''),
      city: new FormControl(''),
      state: new FormControl(''),
      zip: new FormControl('')
    }),
    aliases: new FormArray([
      new FormControl('1')
    ])
  });
  public aliases = (<FormArray>this.profileForm.get(&#39;aliases&#39;));

  public addAlias() {
    (<FormArray>this.profileForm.get(&#39;aliases&#39;)).push(new FormControl(&#39;1&#39;));
  }

      // 获取整个 formArray 的数据
    this.profileForm.get(&#39;aliases&#39;).valueChanges.subscribe({
      next: value => {
        console.log(&#39;aliases values is: &#39; + JSON.stringify(value)); // aliases values is: ["1","3"]
      }
    });

    // 获取 formArray 中单个 formControl 的数据
    (<FormArray>this.profileForm.get(&#39;aliases&#39;)).controls[0].valueChanges.subscribe({
      next: value => {
        console.log(&#39;aliases[0] values is: &#39; + value); // aliases[0] values is: 0
      }
    })

      <form [formGroup]="profileForm" (ngSubmit)="onSubmit()">

        <label>
          First Name:
          <input type="text" formControlName="firstName">
        </label>

        <label>
          Last Name:
          <input type="text" formControlName="lastName">
        </label>
        <div formGroupName="address">
          <h3>Address</h3>

          <label>
            Street:
            <input type="text" formControlName="street">
          </label>

          <label>
            City:
            <input type="text" formControlName="city">
          </label>

          <label>
            State:
            <input type="text" formControlName="state">
          </label>

          <label>
            Zip Code:
            <input type="text" formControlName="zip">
          </label>
        </div>
        <div formArrayName="aliases">
          <h3>Aliases</h3> <button (click)="addAlias()">Add Alias</button>

          <div *ngFor="let alias of aliases.controls; let i=index">
            <!-- The repeated alias template -->
            <label>
              Alias:
              <input type="text" [formControlName]="i">
            </label>
          </div>
        </div>
      </form>

🎜🎜2.4 Contrôles de formulaire de groupe🎜🎜🎜Un formulaire contient généralement plusieurs contrôles interdépendants. Les formulaires réactifs offrent deux façons de regrouper plusieurs contrôles associés dans le même formulaire de saisie. 🎜
🎜Groupe de formulaires définit un formulaire avec un ensemble de contrôles que vous pouvez gérer ensemble. Les bases des groupes de formulaires sont abordées dans cette section. Vous pouvez également créer des formulaires plus complexes par groupes de formulaires imbriqués. 🎜🎜Form array définit un formulaire dynamique dans lequel vous pouvez ajouter et supprimer des contrôles au moment de l'exécution. Vous pouvez également créer des formulaires plus complexes à l'aide de tableaux de formulaires imbriqués🎜🎜🎜Pour ajouter un groupe de formulaires à ce composant, suivez les étapes ci-dessous. 🎜
🎜🎜Créez une instance FormGroup. 🎜🎜🎜🎜Associez ce modèle FormGroup à la vue. 🎜🎜🎜🎜Enregistrez les données du formulaire. 🎜🎜🎜🎜🎜Créez une propriété appelée profileForm dans la classe de composant et définissez-la sur une nouvelle instance de FormGroup. Pour initialiser ce FormGroup, fournissez au constructeur un objet composé de contrôles. Chaque nom dans l'objet doit correspondre au nom du contrôle du formulaire. 🎜

import { FormControl, FormGroup } from '@angular/forms';
  profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
  });
  // 可以整个获取值
  public onSubmit() {
    // TODO: Use EventEmitter with form value
    console.warn(this.profileForm.value);// {firstName: "", lastName: ""}
  }
      // 可以借助 valueChanges 整个可观察对象整个获取值
     this.profileForm.valueChanges.subscribe( {
      next: value => {
        console.log("name value is: " + JSON.stringify(value)); // dashboard.component.ts:53 name value is: {"firstName":"dddd","lastName":"bb"}
      }
    })

    // 可以通过后期单个控件单独获取值
    this.profileForm.get('firstName').valueChanges.subscribe({
      next: value => {
        console.log("First Name is: " + value); // First Name is: aa
      }

ps: 这个 FormGroup 用对象的形式提供了它的模型值，这个值来自组中每个控件的值。 FormGroup 实例拥有和 FormControl 实例相同的属性（比如 value、untouched）和方法（比如 setValue()）。

这个表单组还能跟踪其中每个控件的状态及其变化，所以如果其中的某个控件的状态或值变化了，父控件也会发出一次新的状态变更或值变更事件。该控件组的模型来自它的所有成员。在定义了这个模型之后，你必须更新模板，来把该模型反映到视图中。

<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
 
  <label>
    First Name:
    <input type="text" formControlName="firstName">
  </label>

  <label>
    Last Name:
    <input type="text" formControlName="lastName">
  </label>

  <button type="submit" [disabled]="!profileForm.valid">Submit</button>
</form>

2.5 创建嵌套的表单组

表单组可以同时接受单个表单控件实例和其它表单组实例作为其子控件。这可以让复杂的表单模型更容易维护，并在逻辑上把它们分组到一起。
要制作更复杂的表单，请遵循如下步骤。

• 创建一个嵌套的表单组

• 板中对这个嵌套表单分组。

要在 profileForm 中创建一个嵌套组，就要把一个嵌套的 address 元素添加到此表单组的实例中。

  public profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
    address: new FormGroup({
      street: new FormControl(''),
      city: new FormControl(''),
      state: new FormControl(''),
      zip: new FormControl('')
    })
  });
    // 可以借助 valueChanges 整个可观察对象整个获取值
    this.profileForm.valueChanges.subscribe( {
      next: value => {
        console.log("name value is: " + JSON.stringify(value));// name value is: {"firstName":"","lastName":"","address":{"street":"b","city":"","state":"","zip":""}}
      }
    });

    // 可以通过后期单个控件单独获取值
    this.profileForm.get('firstName').valueChanges.subscribe({
      next: value => {
        console.log("First Name is: " + value);
      }
    });

    // 可以获取form组件某个form组的整个值
    this.profileForm.get('address').valueChanges.subscribe(({
      next: value => {
        console.log('address value is: ' + JSON.stringify(value));// address value is: {"street":"b","city":"","state":"","zip":""}
      }
    }));

    // 可以获取form组件某个form组的某个formcontrol实例的值
    this.profileForm.get('address').get('street').valueChanges.subscribe(({
      next: value => {
        console.log('street value is: ' + value);// street value is: b
      }
    }));

在修改了组件类中的模型之后，还要修改模板，来把这个 FormGroup 实例对接到它的输入元素。

      <form [formGroup]="profileForm" (ngSubmit)="onSubmit()">

        <label>
          First Name:
          <input type="text" formControlName="firstName">
        </label>

        <label>
          Last Name:
          <input type="text" formControlName="lastName">
        </label>
        <div formGroupName="address">
          <h3>Address</h3>

          <label>
            Street:
            <input type="text" formControlName="street">
          </label>

          <label>
            City:
            <input type="text" formControlName="city">
          </label>

          <label>
            State:
            <input type="text" formControlName="state">
          </label>

          <label>
            Zip Code:
            <input type="text" formControlName="zip">
          </label>
        </div>
        <button type="submit" [disabled]="!profileForm.valid">Submit</button>
      </form>

2.6 更新部分数据模型

当修改包含多个 FormGroup 实例的值时，你可能只希望更新模型中的一部分，而不是完全替换掉。

有两种更新模型值的方式：

• 使用 setValue() 方法来为单个控件设置新值。 setValue() 方法会严格遵循表单组的结构，并整体性替换控件的值。
• 使用 patchValue() 方法可以用对象中所定义的任何属性为表单模型进行替换。

setValue() 方法的严格检查可以帮助你捕获复杂表单嵌套中的错误，而 patchValue() 在遇到那些错误时可能会默默的失败。

  public updateProfile() {
      // profileForm 模型中只有 firstName 和 street 被修改了。注意，street 是在 address 属性的对象中被修改的。这种结构是必须的，因为 patchValue() 方法要针对模型的结构进行更新。patchValue() 只会更新表单模型中所定义的那些属性。
    this.profileForm.patchValue({
      firstName: 'Nancy' + new Date().getTime(),
      address: {
        street: '123 Drew Street' + new Date().getTime()
      }
    });

    // ERROR Error: Must supply a value for form control with name: 'lastName'.
    // setValue() 方法会严格遵循表单组的结构
    this.profileForm.setValue({
      firstName: 'Nancy' + new Date().getTime(),
      address: {
        street: '123 Drew Street' + new Date().getTime()
      }
    });
  }

2.7 创建动态表单

FormArray 是 FormGroup 之外的另一个选择，用于管理任意数量的匿名控件。像 FormGroup 实例一样，你也可以往 FormArray 中动态插入和移除控件，并且 FormArray 实例的值和验证状态也是根据它的子控件计算得来的。 不过，你不需要为每个控件定义一个名字作为 key，因此，如果你事先不知道子控件的数量，这就是一个很好的选择。

要定义一个动态表单，请执行以下步骤。

• 导入 FormArray 类。

• 定义一个 FormArray 控件。

• 使用 getter 方法访问 FormArray 控件。

• 在模板中显示这个表单数组

通过把一组（从零项到多项）控件定义在一个数组中来初始化一个 FormArray。为 profileForm 添加一个 aliases 属性，把它定义为 FormArray 类型。

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

  public profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
    address: new FormGroup({
      street: new FormControl(''),
      city: new FormControl(''),
      state: new FormControl(''),
      zip: new FormControl('')
    }),
    aliases: new FormArray([
      new FormControl('1')
    ])
  });
  public aliases = (<FormArray>this.profileForm.get(&#39;aliases&#39;));

  public addAlias() {
    (<FormArray>this.profileForm.get(&#39;aliases&#39;)).push(new FormControl(&#39;1&#39;));
  }

      // 获取整个 formArray 的数据
    this.profileForm.get(&#39;aliases&#39;).valueChanges.subscribe({
      next: value => {
        console.log(&#39;aliases values is: &#39; + JSON.stringify(value)); // aliases values is: ["1","3"]
      }
    });

    // 获取 formArray 中单个 formControl 的数据
    (<FormArray>this.profileForm.get(&#39;aliases&#39;)).controls[0].valueChanges.subscribe({
      next: value => {
        console.log(&#39;aliases[0] values is: &#39; + value); // aliases[0] values is: 0
      }
    })

要想为表单模型添加 aliases，你必须把它加入到模板中供用户输入。和 FormGroupNameDirective 提供的 formGroupName 一样，FormArrayNameDirective 也使用 formArrayName 在这个 FormArray 实例和模板之间建立绑定

      <form [formGroup]="profileForm" (ngSubmit)="onSubmit()">

        <label>
          First Name:
          <input type="text" formControlName="firstName">
        </label>

        <label>
          Last Name:
          <input type="text" formControlName="lastName">
        </label>
        <div formGroupName="address">
          <h3>Address</h3>

          <label>
            Street:
            <input type="text" formControlName="street">
          </label>

          <label>
            City:
            <input type="text" formControlName="city">
          </label>

          <label>
            State:
            <input type="text" formControlName="state">
          </label>

          <label>
            Zip Code:
            <input type="text" formControlName="zip">
          </label>
        </div>
        <div formArrayName="aliases">
          <h3>Aliases</h3> <button (click)="addAlias()">Add Alias</button>

          <div *ngFor="let alias of aliases.controls; let i=index">
            <!-- The repeated alias template -->
            <label>
              Alias:
              <input type="text" [formControlName]="i">
            </label>
          </div>
        </div>
      </form>

2.8 响应式表单 API 汇总

类	说明
AbstractControl	所有三种表单控件类（FormControl、FormGroup 和 FormArray）的抽象基类。它提供了一些公共的行为和属性。
FormControl	管理单体表单控件的值和有效性状态。它对应于 HTML 的表单控件，比如 或 。
FormGroup	管理一组 AbstractControl 实例的值和有效性状态。该组的属性中包括了它的子控件。组件中的顶层表单就是 FormGroup。
FormArray	管理一些 AbstractControl 实例数组的值和有效性状态。
FormBuilder	一个可注入的服务，提供一些用于提供创建控件实例的工厂方法。

三、模板驱动表单

在模板驱动表单中，表单模型是隐式的，而不是显式的。指令 NgModel 为指定的表单元素创建并管理一个 FormControl 实例。
下面的组件使用模板驱动表单为单个控件实现了同样的输入字段。

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

@Component({
  selector: 'app-template-favorite-color',
  template: `
    Favorite Color: <input type="text" [(ngModel)]="favoriteColor">
  `
})
export class FavoriteColorComponent {
  favoriteColor = &#39;&#39;;
}

四、响应式表单验证表单输入

在组件类中直接把验证器函数添加到表单控件模型上（FormControl）。然后，一旦控件发生了变化，Angular 就会调用这些函数。

4.1 验证器（Validator）函数

验证器函数可以是同步函数，也可以是异步函数。

• 同步验证器：这些同步函数接受一个控件实例，然后返回一组验证错误或 null。你可以在实例化一个 FormControl 时把它作为构造函数的第二个参数传进去。
• 异步验证器 ：这些异步函数接受一个控件实例并返回一个 Promise 或 Observable，它稍后会发出一组验证错误或 null。在实例化 FormControl 时，可以把它们作为第三个参数传入。

出于性能方面的考虑，只有在所有同步验证器都通过之后，Angular 才会运行异步验证器。当每一个异步验证器都执行完之后，才会设置这些验证错误。

4.2 内置验证器函数

在模板驱动表单中用作属性的那些内置验证器，比如 required 和 minlength，也都可以作为 Validators 类中的函数使用

 public profileForm = new FormGroup({
    firstName: new FormControl('', [
      Validators.required
    ]),
  });

    this.profileForm.get('firstName').valueChanges.subscribe({
      next: value => {
        console.log("First Name is: " + value);
        console.log(this.profileForm.get('firstName').errors);// { required: true } | null
      }
    });

      <form [formGroup]="profileForm">

        <label>
          First Name:
          <input type="text" formControlName="firstName">
          <div *ngIf="firstName.errors?.required">
            Name is required.
          </div>
        </label>
    </form>

4.3 定义自定义验证器

内置的验证器并不是总能精确匹配应用中的用例，因此有时你需要创建一个自定义验证器。

  public profileForm = new FormGroup({
    firstName: new FormControl('', [
      Validators.required,
      this.forbiddenNameValidator(/bob/i)
    ])
  });

  public forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
    return (control: AbstractControl): {[key: string]: any} | null => {
      const forbidden = nameRe.test(control.value);
      return forbidden ? {forbiddenName: {value: control.value}} : null;
    };
  }

  get firstName() { return this.profileForm.get('firstName'); }



      this.profileForm.get('firstName').valueChanges.subscribe({
      next: value => {
        console.log("First Name is: " + value); // First Name is: bob
        console.log(JSON.stringify(this.profileForm.get('firstName').errors));// {"forbiddenName":{"value":"bob"}} | null
      }
    });

4.4 跨字段交叉验证

跨字段交叉验证器是一种自定义验证器，可以对表单中不同字段的值进行比较，并针对它们的组合进行接受或拒绝。

下列交叉验证的例子说明了如何进行如下操作：

• 根据两个兄弟控件的值验证响应式表单或模板驱动表单的输入，
• 当用户与表单交互过，且验证失败后，就会显示描述性的错误信息

要想在单个自定义验证器中计算这两个控件，你就必须在它们共同的祖先控件中执行验证： FormGroup。你可以在 FormGroup 中查询它的子控件，从而让你能比较它们的值。要想给 FormGroup 添加验证器，就要在创建时把一个新的验证器传给它的第二个参数。

    this.profileForm.valueChanges.subscribe( {
      next: value => {
        console.log(JSON.stringify(this.profileForm.errors));// {"identityRevealed":true} | null
      }
    });

  public profileForm = new FormGroup({
    firstName: new FormControl('', [
      Validators.required,
    ]),
    lastName: new FormControl(''),
  }, { validators: this.identityRevealedValidator});

  public identityRevealedValidator(control: FormGroup): ValidationErrors | null{
    const firstName = control.get('firstName');
    const lastName = control.get('lastName');
    return firstName && lastName && firstName.value === lastName.value ? { identityRevealed: true } : null;
  };

4.5 创建异步验证器

异步验证器实现了 AsyncValidatorFn 和 AsyncValidator 接口。它们与其同步版本非常相似，但有以下不同之处。

• validate() 函数必须返回一个 Promise 或可观察对象，
• 返回的可观察对象必须是有尽的，这意味着它必须在某个时刻完成（complete）。要把无尽的可观察对象转换成有尽的，可以在管道中加入过滤操作符，比如 first、last、take 或 takeUntil。

异步验证在同步验证完成后才会发生，并且只有在同步验证成功时才会执行。如果更基本的验证方法已经发现了无效输入，那么这种检查顺序就可以让表单避免使用昂贵的异步验证流程（例如 HTTP 请求）。

4.6 触发某个formControlName

    let formControl = this.profileForm.get('firstName');
    formControl.updateValueAndValidity();

更多编程相关知识，请访问：编程视频！！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!