Un article pour parler des formulaires responsives en angulaire

Cet article parlera des formulaires réactifs dans Angular et présentera les méthodes d'enregistrement global des modules de formulaire réactifs, d'ajout de contrôles de formulaire de base et de regroupement des contrôles de formulaire. J'espère que cela sera utile à tout le monde !

Formulaires réactifs

Angular propose deux manières différentes de gérer la saisie des utilisateurs via les formulaires : les Formulaires réactifs et les Formulaires pilotés par des modèles. [Tutoriels associés recommandés : "tutoriel angulaire"]响应式表单和模板驱动表单。【相关教程推荐：《angular教程》】

• 响应式表单：提供对底层表单对象模型直接、显式的访问。它们与模板驱动表单相比，更加健壮。如果表单是你的应用程序的关键部分，或者你已经在使用响应式表单来构建应用，那就使用响应式表单。
• 模板驱动表单：依赖模板中的指令来创建和操作底层的对象模型。它们对于向应用添加一个简单的表单非常有用，比如电子邮件列表注册表单。

这里只介绍响应式表单，模板驱动表单请参考官网—https://angular.cn/guide/forms-overview#setup-in-template-driven-forms

全局注册响应式表单模块 ReactiveFormsModule

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

/***** app.module.ts *****/
import { ReactiveFormsModule } from '@angular/forms';

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

添加基础表单控件 FormControl

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

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

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

• 在模板中注册这个 FormControl。

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

/***** test.component.ts *****/
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 TestComponent {
	// 可以在 FormControl 的构造函数设置初始值，这个例子中它是空字符串
  name = new FormControl('');
}

然后在模板中注册该控件，如下：test.component.html

<!-- test.component.html -->
<label>
  Name: <input type="text" [formControl]="name">
</label>
<!-- input 中输入的值变化的话，这里显示的值也会跟着变化 -->
<p>name: {{ name.value }}</p>

FormControl 的其它属性和方法，参阅 API 参考手册：

https://angular.cn/api/forms/FormControl#formcontrol

把表单控件分组 FormGroup

就像FormControl 的实例能让你控制单个输入框所对应的控件一样，FormGroup 的实例也能跟踪一组 FormControl 实例（比如一个表单）的表单状态。当创建 FormGroup 时，其中的每个控件都会根据其名字进行跟踪。

看下例演示：test.component.ts、test.component.html

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

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
    constructor() {}

    profileForm = new FormGroup({
      firstName: new FormControl('', [Validators.required,Validators.pattern('[a-zA-Z0-9]*')]),
      lastName: new FormControl('', Validators.required),
    });
	
	onSubmit() {
		// 查看控件组各字段的值
      console.log(this.profileForm.value)
    }
}

<!-- profileForm 这个 FormGroup 通过 FormGroup 指令绑定到了 form 元素，在该模型和表单中的输入框之间创建了一个通讯层 -->
<!-- FormGroup 指令还会监听 form 元素发出的 submit 事件，并发出一个 ngSubmit 事件，让你可以绑定一个回调函数。 -->
<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
    <label>
<!-- 由 FormControlName 指令把每个输入框和 FormGroup 中定义的表单控件 FormControl 绑定起来。这些表单控件会和相应的元素通讯 -->
      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>

  <p>{{ profileForm.value }}</p>
  <!-- 控件组的状态： INVALID 或 VALID -->
  <p>{{ profileForm.status }}</p>	
  <!-- 控件组输入的值是否为有效值： true 或 false-->
  <p>{{ profileForm.valid }}</p>
  <!-- 是否禁用： true 或 false-->
  <p>{{ profileForm.disabled }}</p>

FormGroup 的其它属性和方法，参阅 API 参考手册：

https://angular.cn/api/forms/FormGroup#formgroup

使用更简单的 FormBuilder 服务生成控件实例

在响应式表单中，当需要与多个表单打交道时，手动创建多个表单控件实例会非常繁琐。FormBuilder服务提供了一些便捷方法来生成表单控件。FormBuilder在幕后也使用同样的方式来创建和返回这些实例，只是用起来更简单。

FormBuilder 是一个可注入的服务提供者，它是由 ReactiveFormModule 提供的。只要把它添加到组件的构造函数中就可以注入这个依赖。

FormBuilder服务有三个方法：control()、group()和 array()。这些方法都是工厂方法，用于在组件类中分别生成FormControl、FormGroup 和 FormArray。

看下例演示：test.component.ts

import { Component } from '@angular/core';
// 1、导入 FormBuilder
import { FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent {
	// 2、注入 FormBuilder 服务
    constructor(private fb: FormBuilder) { }
    ngOnInit() { }

    profileForm = this.fb.group({
      firstName: ['', [Validators.required, Validators.pattern('[a-zA-Z0-9]*')]],
      lastName: ['', Validators.required],
    });
    // 相当于
    // profileForm = new FormGroup({
    //   firstName: new FormControl('', [Validators.required,Validators.pattern('[a-zA-Z0-9]*')]),
    //   lastName: new FormControl('', Validators.required),
    // });

    onSubmit() {
      console.log(this.profileForm.value)
      console.log(this.profileForm)
    }
}

对比可以发现，使用FormBuilder服务可以更方便地生成FormControl、FormGroup 和 FormArray，而不必每次都手动new一个新的实例出来。

表单验证器 Validators

Validators类验证器的完整API列表，参考API手册：

https://angular.cn/api/forms/Validators

验证器（Validators

• Formulaires réactifs : fournissent un accès direct et explicite au modèle objet de formulaire sous-jacent. Ils sont plus robustes que les formulaires basés sur des modèles. 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.
• Formulaires basés sur des modèles : s'appuient sur les instructions des 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.

Seuls les formulaires réactifs sont présentés ici. Pour les formulaires basés sur des modèles, veuillez vous référer au site officiel : https://angular.cn/guide/forms-overview#setup-in-. template-driven-forms🎜

🎜Enregistrez globalement le module de formulaire réactif ReactiveFormsModule🎜

🎜Pour utiliser le contrôle de formulaire réactif, vous devez importer ReactiveFormsModule@angular /forms package /code> et ajoutez-le au tableau imports de votre NgModule. Comme suit : app.module.ts🎜

class Validators {
  static min(min: number): ValidatorFn		// 允许输入的最小数值
  static max(max: number): ValidatorFn		// 最大数值
  static required(control: AbstractControl): ValidationErrors | null	// 是否必填
  static requiredTrue(control: AbstractControl): ValidationErrors | null
  static email(control: AbstractControl): ValidationErrors | null	// 是否为邮箱格式
  static minLength(minLength: number): ValidatorFn		// 最小长度
  static maxLength(maxLength: number): ValidatorFn		// 最大长度
  static pattern(pattern: string | RegExp): ValidatorFn	// 正则匹配
  static nullValidator(control: AbstractControl): ValidationErrors | null	// 什么也不做
  static compose(validators: ValidatorFn[]): ValidatorFn | null
  static composeAsync(validators: AsyncValidatorFn[]): AsyncValidatorFn | null
}

🎜Ajouter un contrôle de formulaire de base FormControl🎜

🎜Il y a trois étapes pour utiliser le contrôle 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 enregistrer un contrôle de formulaire, importez la classe FormControl et créez une nouvelle instance de FormControl et enregistrez-la en tant que propriété de la classe . Comme suit : test.component.ts🎜

import { Validators } from '@angular/forms';
...
ngOnInit(): void {
  this.heroForm = new FormGroup({
  // 实例化 FormControl 控件
    name: new FormControl(this.hero.name, [
      Validators.required,	// 验证，必填
      Validators.minLength(4),	// 长度不小于4
      forbiddenNameValidator(/bob/i) // 自定义验证器
    ]),
    alterEgo: new FormControl(this.hero.alterEgo),
    power: new FormControl(this.hero.power, Validators.required)
  });
}
get name() { return this.heroForm.get('name'); }

get power() { return this.heroForm.get('power'); }

🎜Ensuite, enregistrez le contrôle dans le modèle comme suit : test.component.html🎜

import { Validators } from '@angular/forms';
...
ngOnInit(): void {
  this.heroForm = new FormGroup({
    name: new FormControl(this.hero.name, [
      Validators.required,
      Validators.minLength(4),
      // 1、添加自定义验证器
      forbiddenNameValidator(/bob/i)
    ])
  });
}
// 2、实现自定义验证器，功能为禁止输入带有 bob 字符串的值
export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const forbidden = nameRe.test(control.value);
    // 3、在值有效时返回 null，或无效时返回验证错误对象
    return forbidden ? {forbiddenName: {value: control.value}} : null;
  };
}

🎜FormControl Pour d'autres propriétés et méthodes, veuillez vous référer au manuel de référence de l'API : 🎜🎜https://angular.cn/api/forms/FormControl#formcontrol🎜

🎜Regroupez les contrôles de formulaire dans FormGroup🎜

🎜Tout comme une instance de FormControl permet de contrôler le contrôle correspondant à une seule zone de saisie, une instance de FormGroup peut également suivre un groupe de FormControl (telles qu'un formulaire). Lorsqu'un FormGroup est créé, chaque contrôle qu'il contient est suivi par son nom. 🎜🎜Regardez l'exemple de démonstration suivant : test.component.ts, test.component.html🎜

// 1、导入相关类
import { NG_VALIDATORS, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
import { Input } from '@angular/core'

@Directive({
  selector: '[appForbiddenName]',
  // 2、注册成为 NG_VALIDATORS 令牌的提供者
  providers: [{provide: NG_VALIDATORS, useExisting: ForbiddenValidatorDirective, multi: true}]
})
export class ForbiddenValidatorDirective implements Validator {
  @Input('appForbiddenName') forbiddenName = '';
  // 3、实现 validator 接口，即实现 validate 函数
  validate(control: AbstractControl): ValidationErrors | null {
  	// 在值有效时返回 null，或无效时返回验证错误对象
    return this.forbiddenName ? forbiddenNameValidator(new RegExp(this.forbiddenName, 'i'))(control)
                              : null;
  }
}
// 4、自定义验证函数
export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const forbidden = nameRe.test(control.value);
    // 3、在值有效时返回 null，或无效时返回验证错误对象
    return forbidden ? {forbiddenName: {value: control.value}} : null;
  };
}

<input type="text" required appForbiddenName="bob" [(ngModel)]="hero.name">

🎜FormGroup d'autres attributs et méthodes, veuillez vous référer au manuel de référence de l'API : 🎜🎜https://angular.cn/api/forms/FormGroup#formgroup🎜

🎜Utilisez le service FormBuilder plus simple pour générer des instances de contrôle🎜🎜En réponse Dans un contrôle de formulaire, lorsque vous devez gérer plusieurs formulaires, il sera très fastidieux de créer manuellement plusieurs instances de contrôle de formulaire. Le service FormBuilder fournit des méthodes pratiques pour générer des contrôles de formulaire. FormBuilder crée et renvoie ces instances de la même manière en arrière-plan, c'est simplement plus simple à utiliser. 🎜🎜FormBuilder est un fournisseur de services injectables fourni par ReactiveFormModule. Cette dépendance peut être injectée en l'ajoutant simplement au constructeur du composant. 🎜

🎜Le service FormBuilder a trois méthodes : control(), group() et array() . Ces méthodes sont des méthodes d'usine utilisées pour générer respectivement FormControl, FormGroup et FormArray dans la classe de composant. 🎜

🎜Regardez l'exemple de démonstration suivant : test.component.ts🎜rrreee🎜On peut constater que l'utilisation du service FormBuilder peut générer plus facilement du FormControl, <code>FormGroup et FormArray, sans avoir à new créer manuellement une nouvelle instance à chaque fois. 🎜🎜🎜Validateurs de formulaire🎜🎜

🎜Validateurs Pour une liste API complète des validateurs de classe, reportez-vous au manuel de l'API : 🎜🎜https://angular.cn/api/forms/Validators🎜

🎜La fonction validateur (Validators) peut être une fonction synchrone ou une fonction asynchrone. 🎜

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

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

验证器Validators类的API

https://angular.cn/api/forms/Validators

class Validators {
  static min(min: number): ValidatorFn		// 允许输入的最小数值
  static max(max: number): ValidatorFn		// 最大数值
  static required(control: AbstractControl): ValidationErrors | null	// 是否必填
  static requiredTrue(control: AbstractControl): ValidationErrors | null
  static email(control: AbstractControl): ValidationErrors | null	// 是否为邮箱格式
  static minLength(minLength: number): ValidatorFn		// 最小长度
  static maxLength(maxLength: number): ValidatorFn		// 最大长度
  static pattern(pattern: string | RegExp): ValidatorFn	// 正则匹配
  static nullValidator(control: AbstractControl): ValidationErrors | null	// 什么也不做
  static compose(validators: ValidatorFn[]): ValidatorFn | null
  static composeAsync(validators: AsyncValidatorFn[]): AsyncValidatorFn | null
}

内置验证器函数

要使用内置验证器，可以在实例化FormControl控件的时候添加

import { Validators } from '@angular/forms';
...
ngOnInit(): void {
  this.heroForm = new FormGroup({
  // 实例化 FormControl 控件
    name: new FormControl(this.hero.name, [
      Validators.required,	// 验证，必填
      Validators.minLength(4),	// 长度不小于4
      forbiddenNameValidator(/bob/i) // 自定义验证器
    ]),
    alterEgo: new FormControl(this.hero.alterEgo),
    power: new FormControl(this.hero.power, Validators.required)
  });
}
get name() { return this.heroForm.get('name'); }

get power() { return this.heroForm.get('power'); }

自定义验证器

自定义验证器的内容请参考 API手册：

https://angular.cn/guide/form-validation

有时候内置的验证器并不能很好的满足需求，比如，我们需要对一个表单进行验证，要求输入的值只能为某一个数组中的值，而这个数组中的值是随程序运行实时改变的，这个时候内置的验证器就无法满足这个需求，需要创建自定义验证器。

• 在响应式表单中添加自定义验证器。在上面内置验证器一节中有一个forbiddenNameValidator函数如下：

  import { Validators } from '@angular/forms';
  ...
  ngOnInit(): void {
    this.heroForm = new FormGroup({
      name: new FormControl(this.hero.name, [
        Validators.required,
        Validators.minLength(4),
        // 1、添加自定义验证器
        forbiddenNameValidator(/bob/i)
      ])
    });
  }
  // 2、实现自定义验证器，功能为禁止输入带有 bob 字符串的值
  export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
      const forbidden = nameRe.test(control.value);
      // 3、在值有效时返回 null，或无效时返回验证错误对象
      return forbidden ? {forbiddenName: {value: control.value}} : null;
    };
  }

  验证器在值有效时返回 null，或无效时返回验证错误对象。 验证错误对象通常有一个名为验证秘钥（forbiddenName）的属性。其值为一个任意词典，你可以用来插入错误信息（{name}）。

• 在模板驱动表单中添加自定义验证器。要为模板添加一个指令，该指令包含了 validator 函数。同时，该指令需要把自己注册成为NG_VALIDATORS的提供者。如下所示：

  // 1、导入相关类
  import { NG_VALIDATORS, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
  import { Input } from '@angular/core'
  
  @Directive({
    selector: '[appForbiddenName]',
    // 2、注册成为 NG_VALIDATORS 令牌的提供者
    providers: [{provide: NG_VALIDATORS, useExisting: ForbiddenValidatorDirective, multi: true}]
  })
  export class ForbiddenValidatorDirective implements Validator {
    @Input('appForbiddenName') forbiddenName = '';
    // 3、实现 validator 接口，即实现 validate 函数
    validate(control: AbstractControl): ValidationErrors | null {
    	// 在值有效时返回 null，或无效时返回验证错误对象
      return this.forbiddenName ? forbiddenNameValidator(new RegExp(this.forbiddenName, 'i'))(control)
                                : null;
    }
  }
  // 4、自定义验证函数
  export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
      const forbidden = nameRe.test(control.value);
      // 3、在值有效时返回 null，或无效时返回验证错误对象
      return forbidden ? {forbiddenName: {value: control.value}} : null;
    };
  }

  注意，自定义验证指令是用 useExisting 而不是 useClass 来实例化的。如果用useClass来代替 useExisting，就会注册一个新的类实例，而它是没有forbiddenName 的。

  <input type="text" required appForbiddenName="bob" [(ngModel)]="hero.name">

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

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!