각도의 반응형 양식에 대해 설명하는 기사

이 글에서는 Angular의 반응형 폼에 대해 설명하고 반응형 폼 모듈을 전역적으로 등록하는 방법, 기본 폼 컨트롤을 추가하는 방법, 폼 컨트롤을 그룹화하는 방법을 소개합니다. 모두에게 도움이 되기를 바랍니다.

반응형 양식

Angular는 양식을 통해 사용자 입력을 처리하는 두 가지 방법인 반응형 양식과 템플릿 기반 양식을 제공합니다. [추천 관련 튜토리얼: "Angular 튜토리얼"]响应式表单和模板驱动表单。【相关教程推荐：《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

• 반응형 양식: 기본 양식 객체 모델에 대한 직접적이고 명시적인 액세스를 제공합니다. 템플릿 기반 양식보다 더 강력합니다. 양식이 앱의 핵심 부분이거나 이미 반응형 양식을 사용하여 앱을 구축하고 있는 경우 반응형 양식을 사용하세요.
• 템플릿 기반 양식: 템플릿의 지침에 따라 기본 개체 모델을 만들고 작동합니다. 이메일 목록 가입 양식과 같은 간단한 양식을 앱에 추가하는 데 유용합니다.

여기에서는 반응형 양식만 소개합니다. 템플릿 기반 양식은 공식 웹사이트(https://angular.cn/guide/forms-overview#setup-in-)를 참조하세요. template-driven-forms🎜

🎜반응형 양식 모듈 ReactiveFormsModule을 전역적으로 등록하세요🎜

🎜반응형 양식 컨트롤을 사용하려면 @angular에서 <code>ReactiveFormsModule 패키지 /code>를 <code>NgModule의 imports 배열에 추가하세요. 다음과 같습니다: 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
}

🎜기본 양식 컨트롤 추가 FormControl🎜

🎜양식 컨트롤을 사용하는 세 단계가 있습니다. 🎜

• 🎜앱에 반응형 양식 모듈을 등록하세요. 이 모듈은 반응형 형식에서 사용하려는 일부 지시문을 선언합니다. 🎜
• 🎜새 FormControl 인스턴스를 생성하고 구성 요소에 저장합니다. 🎜
• 🎜템플릿에 이 FormControl을 등록하세요. 🎜

🎜양식 컨트롤을 등록하려면 FormControl 클래스를 가져오고 FormControl의 새 인스턴스를 만든 다음 클래스의 속성으로 저장하세요. . 다음과 같습니다. test.comComponent.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'); }

🎜그런 다음 다음과 같이 템플릿에 컨트롤을 등록합니다. test.comComponent.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 기타 속성 및 메소드에 대해서는 API 참조 매뉴얼을 참조하세요: 🎜🎜https://angular.cn/api/forms/FormControl#formcontrol🎜

🎜양식 컨트롤을 FormGroup으로 그룹화🎜

🎜 FormControl 인스턴스를 사용하여 단일 입력 상자에 해당하는 컨트롤을 제어할 수 있는 것처럼 FormGroup 인스턴스도 FormControl 인스턴스(예: 양식) 양식 상태. FormGroup이 생성되면 그 안의 각 컨트롤은 이름으로 추적됩니다. 🎜🎜다음 예제 데모를 살펴보세요: test.comComponent.ts, test.comComponent.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's 다른 속성 및 메서드에 대해서는 API 참조 매뉴얼을 참조하세요: 🎜🎜https://angular.cn/api/forms/FormGroup#formgroup🎜

🎜보다 간단한 FormBuilder 서비스를 사용하여 컨트롤 인스턴스 생성🎜

🎜대응하여 양식에서 여러 양식을 처리해야 할 때 여러 양식 제어 인스턴스를 수동으로 만드는 것은 매우 지루할 것입니다. FormBuilder 서비스는 양식 컨트롤을 생성하기 위한 몇 가지 편리한 방법을 제공합니다. FormBuilder는 백그라운드에서 동일한 방식으로 이러한 인스턴스를 생성하고 반환하지만 사용이 더 간단합니다. 🎜🎜FormBuilder는 ReactiveFormModule에서 제공하는 주입 가능한 서비스 제공자입니다. 이 종속성은 구성 요소의 생성자에 추가하기만 하면 주입될 수 있습니다. 🎜

🎜FormBuilder 서비스에는 control(), group() 및 array()의 세 가지 메서드가 있습니다. . 이러한 메서드는 구성 요소 클래스에서 각각 FormControl, FormGroup 및 FormArray를 생성하는 데 사용되는 팩토리 메서드입니다. 🎜

🎜다음 예제 데모를 보세요: test.comComponent.ts🎜rrreee🎜FormBuilder 서비스를 사용하면 를 더 편리하게 생성할 수 있다는 것을 비교해 볼 수 있습니다. >FormControl, <code>FormGroup 및 FormArray, 매번 새 인스턴스를 수동으로 새할 필요 없이. 🎜🎜🎜Form Validators🎜🎜

🎜Validators 클래스 유효성 검사기의 전체 API 목록은 API 매뉴얼을 참조하세요: 🎜🎜https://angular.cn/api/forms/Validators🎜

🎜검증기(검증기) 함수는 동기 함수일 수도 있고 비동기 함수일 수도 있습니다. 🎜

• 同步验证器：这些同步函数接受一个控件实例，然后返回一组验证错误或 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">

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

위 내용은 각도의 반응형 양식에 대해 설명하는 기사의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!