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

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

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

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

フォームベース

<form novalidate>
  <label>
    <span>Full name</span>
    <input
      type="text"
      name="name"
      placeholder="Your full name">
  </label>
  <p>
    <label>
      <span>Email address</span>
      <input
        type="email"
        name="email"
        placeholder="Your email address">
    </label>
    <label>
      <span>Confirm address</span>
      <input
        type="email"
        name="confirm"
        placeholder="Confirm your email address">
    </label>
  </p>
  <button type="submit">Sign up</button>
</form>

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

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

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

  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: `
    <form novalidate>...</form>
  `
})
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

<form novalidate [formGroup]="myGroup">
  Name: <input type="text" formControlName="name">
  Location: <input type="text" formControlName="location">
</form>

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

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 を通じてフォーム送信ロジックを処理できます。出力属性:

<form novalidate [formGroup]="user">
  <label>
    <span>Full name</span>
    <input
      type="text"
      placeholder="Your full name"
      formControlName="name">
  </label>
  <p formGroupName="account">
    <label>
      <span>Email address</span>
      <input
        type="email"
        placeholder="Your email address"
        formControlName="email">
    </label>
    <label>
      <span>Confirm address</span>
      <input
        type="email"
        placeholder="Confirm your email address"
        formControlName="confirm">
    </label>
  </p>
  <button type="submit">Sign up</button>
</form>

リアクティブエラー検証

次に、検証ルールをフォームに追加します。まず、@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 つだけの場合は、それを直接宣言するだけです。この方法では、テンプレートの入力コントロールに必須の属性を追加する必要がありません。次に、フォームの検証が失敗した場合にフォームの送信を許可しない機能を追加しましょう:

<form novalidate (ngSubmit)="onSubmit()" [formGroup]="user">
  ...
</form>

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

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 を使用して、フォーム コントロールの検証のエラー情報を取得することもできます:

<form novalidate (ngSubmit)="onSubmit(user)" [formGroup]="user">
  ...
  <button type="submit" [disabled]="user.invalid">Sign up</button>
</form>

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

<form novalidate [formGroup]="user">
  {{ user.controls.name?.errors | json }}
</form>

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

FormBuilder による簡素化

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

<form novalidate [formGroup]="user">
  {{ user.get('name').errors | json }}
</form>

次に、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: `
    <form novalidate (ngSubmit)="onSubmit(user)" [formGroup]="user">
      <label>
        <span>Full name</span>
        <input type="text" placeholder="Your full name" formControlName="name">
      </label>
      <p class="error" *ngIf="user.get(&#39;name&#39;).hasError(&#39;required&#39;) && 
            user.get(&#39;name&#39;).touched">
        Name is required
      </p>
      <p class="error" *ngIf="user.get(&#39;name&#39;).hasError(&#39;minlength&#39;) && 
            user.get(&#39;name&#39;).touched">
        Minimum of 2 characters
      </p>
      <p formGroupName="account">
        <label>
          <span>Email address</span>
          <input type="email" placeholder="Your email address" formControlName="email">
        </label>
        <p
          class="error"
          *ngIf="user.get(&#39;account&#39;).get(&#39;email&#39;).hasError(&#39;required&#39;) && 
             user.get(&#39;account&#39;).get(&#39;email&#39;).touched">
          Email is required
        </p>
        <label>
          <span>Confirm address</span>
          <input type="email" placeholder="Confirm your email address" 
             formControlName="confirm">
        </label>
        <p
          class="error"
          *ngIf="user.get(&#39;account&#39;).get(&#39;confirm&#39;).hasError(&#39;required&#39;) && 
             user.get(&#39;account&#39;).get(&#39;confirm&#39;).touched">
          Confirming email is required
        </p>
      </p>
      <button type="submit" [disabled]="user.invalid">Sign up</button>
    </form>
  `
})
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 サイトの他の関連記事を参照してください。