Angular のレスポンシブ フォームについて説明する記事

この記事では、Angular のレスポンシブ フォームについて説明し、レスポンシブ フォーム モジュールのグローバル登録、基本的なフォーム コントロールの追加、フォーム コントロールのグループ化の方法を紹介します。

レスポンシブ フォーム

Angular は、フォームを介してユーザー入力を処理する 2 つの異なる方法を提供します。レスポンシブ フォーム と テンプレート駆動型フォーム 。 [関連チュートリアルの推奨事項: "angular チュートリアル"]

• レスポンシブ フォーム: 基礎となるフォーム オブジェクト モデルへの直接的かつ明示的なアクセスを提供します。これらは、テンプレート駆動型のフォームよりも堅牢です。フォームがアプリの重要な部分である場合、またはすでにリアクティブ フォームを使用してアプリを構築している場合は、リアクティブ フォームを使用してください。
• テンプレート駆動型フォーム: テンプレートの命令に依存して、基礎となるオブジェクト モデルを作成および操作します。これらは、メール リストのサインアップ フォームなどの単純なフォームをアプリに追加する場合に便利です。

ここではレスポンシブ フォームのみを紹介します。テンプレート駆動のフォームについては、公式 Web サイト (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

フォーム コントロールを使用するには 3 つの手順があります。

• リアクティブ フォーム モジュールをアプリケーションに登録します。このモジュールは、リアクティブ フォームで使用するいくつかのディレクティブを宣言します。

• 新しい 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<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>import { Component } from &amp;#39;@angular/core&amp;#39;; import { FormControl, FormGroup, Validators } from &amp;#39;@angular/forms&amp;#39; @Component({ selector: &amp;#39;app-test&amp;#39;, templateUrl: &amp;#39;./test.component.html&amp;#39;, styleUrls: [&amp;#39;./test.component.css&amp;#39;] }) export class TestComponent implements OnInit { constructor() {} profileForm = new FormGroup({ firstName: new FormControl(&amp;#39;&amp;#39;, [Validators.required,Validators.pattern(&amp;#39;[a-zA-Z0-9]*&amp;#39;)]), lastName: new FormControl(&amp;#39;&amp;#39;, Validators.required), }); onSubmit() { // 查看控件组各字段的值 console.log(this.profileForm.value) } }</pre><div class="contentsignin">ログイン後にコピー</div></div>rrree

FormGroup

他のプロパティとメソッドについては、API リファレンス マニュアルを参照してください: https://angular.cn/api/forms/FormGroup#formgroup

より単純な FormBuilder サービス生成コントロール インスタンスを使用する

リアクティブ フォームで複数のフォームを処理する必要がある場合、複数のフォーム コントロール インスタンスを手動で作成するのは非常に面倒です。

FormBuilder

このサービスは、フォーム コントロールを生成するための便利なメソッドをいくつか提供します。 FormBuilder舞台裏でこれらのインスタンスを作成して返すのと同じ方法が使用されますが、使用する方が簡単です。

FormBuilder

は、ReactiveFormModule によって提供される注入可能なサービス プロバイダーです。この依存関係は、コンポーネントのコンストラクターに追加するだけで注入できます。

FormBuilder

サービスには 3 つのメソッドがあります: control()、group()、array() 。これらのメソッドは、コンポーネント クラスで FormControl、FormGroup、および FormArray をそれぞれ生成するために使用されるファクトリ メソッドです。

次のデモ例を見てください:

test.component.ts

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;!-- profileForm 这个 FormGroup 通过 FormGroup 指令绑定到了 form 元素，在该模型和表单中的输入框之间创建了一个通讯层 --&gt; &lt;!-- FormGroup 指令还会监听 form 元素发出的 submit 事件，并发出一个 ngSubmit 事件，让你可以绑定一个回调函数。 --&gt; &lt;form [formGroup]=&quot;profileForm&quot; (ngSubmit)=&quot;onSubmit()&quot;&gt; &lt;label&gt; &lt;!-- 由 FormControlName 指令把每个输入框和 FormGroup 中定义的表单控件 FormControl 绑定起来。这些表单控件会和相应的元素通讯 --&gt; First Name: &lt;input type=&quot;text&quot; formControlName=&quot;firstName&quot;&gt; &lt;/label&gt; &lt;label&gt; Last Name: &lt;input type=&quot;text&quot; formControlName=&quot;lastName&quot;&gt; &lt;/label&gt; &lt;button type=&quot;submit&quot; [disabled]=&quot;!profileForm.valid&quot;&gt;Submit&lt;/button&gt; &lt;/form&gt; &lt;p&gt;{{ profileForm.value }}&lt;/p&gt; &lt;!-- 控件组的状态： INVALID 或 VALID --&gt; &lt;p&gt;{{ profileForm.status }}&lt;/p&gt; &lt;!-- 控件组输入的值是否为有效值： true 或 false--&gt; &lt;p&gt;{{ profileForm.valid }}&lt;/p&gt; &lt;!-- 是否禁用： true 或 false--&gt; &lt;p&gt;{{ profileForm.disabled }}&lt;/p&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div> 比較すると、

FormBuilder

サービスを使用すると次のことがわかります。毎回手動で new 新しいインスタンスを作成する必要がなく、FormControl、FormGroup、FormArray を生成する方が便利です。 #フォームバリデータバリデータ

バリデータ

クラスバリデータの完全な API リストについては、API マニュアルを参照してください:

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

バリデーター (

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">

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

  以上がAngular のレスポンシブ フォームについて説明する記事の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。