Angular のレスポンシブ フォームの概要

この記事では、主に Angular でのレスポンシブ フォームの導入について説明します。これは、必要な友達に共有します。

レスポンシブ フォームは、コンポーネント クラスに記述します。テンプレート内で制御が行われるテンプレート駆動型のフォームとは異なります。リアクティブ フォームは柔軟性があり、あらゆる複雑なフォーム シナリオの処理に使用できます。 HTML コードを減らし、より多くのコンポーネント コードを作成することで、単体テストが容易になります。

フォームベースとインターフェース

フォームベース

       Full name           

           Email address                        Confirm address               

  Sign up

次に実装したい機能は次のとおりです:

• 名前、メールアドレス、入力ボックスの確認の値をバインド

• フォーム検証を追加すべての入力ボックスに関数

  display検証例外情報formフォーム検証が失敗した場合、フォームの送信が許可されていません。リアクティブ フォームを引き続き詳しく紹介します。 形成する前に、@NgModule の @angular/forms ライブラリに ReactiveFormsModule をインポートする必要があります。フォームモジュール。
• リアクティブなアプローチ
  上記で定義された基本フォームに基づいて SignupFormComponent を作成します:
• signup-form.component.ts

  // signup.interface.ts
  export interface User {
    name: string;
    account: {
      email: string;
      confirm: string;
    }
  }

  これは、上記の関数を実装する前に、最初に FormControl を導入する必要があります。 FormGroup と FormBuilder の概念と使用法。
• FormControl と FormGroup
  まず FormControl と FormGroup の概念を紹介します。

FormControl - 単一のフォーム コントロールのサポートを提供し、コントロールの値と検証ステータスを追跡するために使用できるクラスです。 、一連のパブリック API も提供します。

使用例:

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

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

FormGroup - FormControl グループの値と検証ステータスを追跡するために使用できる FormControl インスタンスのセットが含まれており、一連のパブリック API も提供します。

使用例:

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

@Component({
  selector: 'signup-form',
  template: `
    

...

  ` }) export class SignupFormComponent {   constructor() {} }

FormControl インスタンスと FormGroup インスタンスを作成したので、その使用方法を見てみましょう:

ngOnInit() {
  this.myControl = new FormControl('');
}

上記の例では、作成した myGroup オブジェクトをバインドするために [formGroup] を使用する必要があります。ただし、作成した FormControl コントロールをバインドするには、formControlName ディレクティブを使用する必要があります。この時点のフォーム構造は次のとおりです:

ngOnInit() {
  this.myGroup = new FormGroup({
    name: new FormControl(''),
    location: new FormControl('')
  });
}

FormGroup モデルの実装

signup.interface.ts

  Name:    Location: 

対応するフォーム構造は次のとおりです:

FormGroup -> 'myGroup'
    FormControl -> 'name'
    FormControl -> 'location'

はい、ネストされた FormGroup コレクションを作成できます。 (初期データなしで) コンポーネントを更新しましょう:

export interface User {
  name: string;
  account: {
    email: string;
    confirm: string;
  }
}

初期データを設定したい場合は、上の例のように行うことができます。通常、フォームの初期情報はサーバーが提供するAPIインターフェースを通じて取得します。

FormGroup モデルのバインド

FormGroup モデルをインスタンス化したので、今度はそれを対応する DOM 要素にバインドします。具体的な例は次のとおりです。

FormGroup -> 'user'
    FormControl -> 'name'
    FormGroup -> 'account'
        FormControl -> 'email'
        FormControl -> 'confirm'

FormGroup オブジェクトと FormControl オブジェクト、および DOM 構造間の関連情報は次のとおりです:

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

@Component({...})
export class SignupFormComponent implements OnInit {
  user: FormGroup;
  ngOnInit() {
    this.user = new FormGroup({
      name: new FormControl(''),
      account: new FormGroup({
        email: new FormControl(''),
        confirm: new FormControl('')
      })
    });
  }
}

リアクティブ送信

テンプレート駆動型フォームと同様に、ngSubmit を通じてフォーム送信ロジックを処理できます。出力属性:

       Full name           

           Email address                        Confirm address               

  Sign up

リアクティブエラー検証

次に、検証ルールをフォームに追加します。まず、@angular/forms からバリデータをインポートする必要があります。具体的な使用例は次のとおりです。

// JavaScript APIs
FormGroup -> 'user'
    FormControl -> 'name'
    FormGroup -> 'account'
        FormControl -> 'email'
        FormControl -> 'confirm'

// DOM bindings
formGroup -> 'user'
    formControlName -> 'name'
    formGroupName -> 'account'
        formControlName -> 'email'
        formControlName -> 'confirm'

上記の例を通じて、フォーム コントロールに複数の検証ルールが含まれている場合、配列を使用して複数の検証ルールを宣言できることがわかります。含める検証ルールが 1 つだけの場合は、それを直接宣言するだけです。この方法では、テンプレートの入力コントロールに必須の属性を追加する必要がありません。次に、フォームの検証が失敗した場合にフォームの送信を許可しない機能を追加しましょう:

  ...

それでは、フォーム コントロールの検証情報をどのように取得するかが問題になります。次のように、テンプレート駆動フォームで導入されたメソッドを使用できます:

ngOnInit() {
  this.user = new FormGroup({
    name: new FormControl('', [Validators.required, Validators.minLength(2)]),
    account: new FormGroup({
      email: new FormControl('', Validators.required),
      confirm: new FormControl('', Validators.required)
    })
  });
}

さらに、FormGroup オブジェクトによって提供される API を使用して、フォーム コントロールの検証のエラー情報を取得することもできます:

  ...   Sign up

それでは、完全なコードを見てください:

  {{ user.controls.name?.errors | json }}

この関数は実装されていますが、FormGroup オブジェクトの作成方法が少し面倒であることは Angular チームも認識しているため、上記の操作を簡素化する FormBuilder を提供しています。

FormBuilder による簡素化

まず、@angular/forms から FormBuilder をインポートする必要があります:

  {{ user.get('name').errors | json }}

次に、FormBuilder オブジェクトによって提供される group() メソッドを使用して、FormGroup オブジェクトと FormControl オブジェクトを作成します:

調整前のコード (そうではありません) FormBuilder使用):

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { User } from './signup.interface';

@Component({
  selector: 'signup-form',
  template: `
    

               Full name                       

        Name is required       

      

        Minimum of 2 characters       

      

                   Email address                             

          Email is required         

                   Confirm address                             

          Confirming email is required         

             Sign up     

  ` }) export class SignupFormComponent implements OnInit {   user: FormGroup;   constructor() {}   ngOnInit() {     this.user = new FormGroup({       name: new FormControl('', [Validators.required, Validators.minLength(2)]),       account: new FormGroup({         email: new FormControl('', Validators.required),         confirm: new FormControl('', Validators.required)       })     });   }   onSubmit({ value, valid }: { value: User, valid: boolean }) {     console.log(value, valid);   } }調整後のコード(FormBuilder使用):

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

export class SignupFormComponent implements OnInit {
  user: FormGroup;
  constructor(private fb: FormBuilder) {}
  ...
}

調整前と調整後のコードを比べてみると、一気に便利になったと感じませんか？アップデート後の完全なコードは次のとおりです:

ngOnInit() {
  this.user = new FormGroup({
    name: new FormControl('', [Validators.required, Validators.minLength(2)]),
    account: new FormGroup({
      email: new FormControl('', Validators.required),
      confirm: new FormControl('', Validators.required)
    })
  });
}

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連するおすすめ:

vue.jsベースのダイアログプラグインart-dialog-vue2.0のリリース内容

AngularJsとAngularのよく使われる命令記述方法の違い

Jqueryのパラメータ受け渡しAngularJS で取得/投稿

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