最初のAngularリアクティブフォームの作り方
Angularリアクティブフォームの作成方法をご存知ですか?このプロセスの詳細については、このブログ記事をお読みください。詳細な手順が含まれています。詳細情報。
ダナンジャイ・クマール
読者9分
Angularリアクティブフォームの作成方法をご存知ですか? Angularは箱から出して、2種類のフォームを提供します:
- テンプレート駆動フォーム
- 反応型
テンプレート駆動フォームでは、コンポーネントテンプレート上でコントロールを作成し、ngModelを使ってデータをバインドします。これらでは、コントロールやフォームオブジェクトの作成、コンポーネントクラスとテンプレート間のプッシュ・プルのコードを書く必要はありません。Angularこれらすべての作業を代わりに行ってくれます。テンプレート駆動フォームでは、コンポーネントクラスの検証コードは非常に少なく、非同期です。
Reactive Formsでは、コンポーネントクラスのオブジェクトのツリーとしてフォームコントロールを作成し、テンプレート内のネイティブフォームコントロールにバインドします。すべての検証とフォームコントロールの作成はコンポーネントクラスで記述されます。Reactive Formsでは、すべての検証やネイティブフォームの状態変更が同期しているため、コンポーネントクラスでコードを書いて観察できます。データモデルが不変で通常はデータベースにマッピングされている場合にリアクティブフォームを作成するべきです。
この2つのフォーム作成アプローチの主な違いは何ですか?リアクティブフォームではngModelやrequiredなどの指示は使いません。すべてのコントロールとその検証はコンポーネントクラスで作成します。リアクティブフォームはテストや保守が簡単なので、本記事ではFormControl、FormGroup、FormBuilderクラスを使い、検証を追加して基本的なリアクティブフォームを作成する方法を学びます。
ステップ1:リアクティブフォームモジュールの追加
リアクティブフォームの作業を始めるには、まず次のリストに示されているようにアプリモジュールにReactiveFormsModleを追加してください。
import {ReactiveFormsModule} from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule, ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
ステップ2:コンポーネントに必要モジュールをインポートする
次に、FormGroup、FormControl、FormArrayなどの必要なリアクティブフォームクラスをコンポーネントクラスにインポートする必要があります。これらのクラスを使ってリアクティブフォームを作成します。これらのクラスをインポートした後、コンポーネントクラスは以下の一覧のように見えるはずです。
import { Component } from '@angular/core';
import { FormGroup, FormControl, FormArray } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Reactive Forms Demo';
}
コンポーネントクラスは、実装によっては上記のAppComponentとは異なる場合があります。ただし、ここではFormGroup、FormControl、FormArrayの各クラスをインポートしています。これらのクラスについて一つずつ学んでいきましょう:
ステップ3:FormControlクラスの使用
FormControlクラスは1つの個別のフォームコントロールに対応し、その値と有効性を追跡します。リアクティブフォームを作成する際には、FormControlクラスのオブジェクトを作成します。FormControlのコンストラクタは3つのパラメータを取ります:
- 初期データ値(null)に設定できます。
- 同期検証器の配列。これはオプションのパラメータです。
- 非同期検証器の配列。これはオプションのパラメータです。
コンポーネントクラスでは、以下の一覧のようにFormControlを作成できます。
export class AppComponent {
email = new FormControl('');
}
同期検証や非同期検証などのオプションパラメータは渡していませんが、FormControlに検証を追加する際にこれらのパラメータを探索します。
Viewでは、以下のようにメールFormControlを使用できます:
<input [formControl]='email'
type="text"
placeholder="Enter Email" />
{{email.value | json}}
ご覧の通り、プロパティバインディングを使ってformControlのメールをビューの入力要素にバインドしています。
ステップ4:FormGroupクラスの使用
FormGroupはFormControlのグループです。FormGroup内に様々なFormControlをカプセル化でき、以下のAPIを提供します:
- 対照群や形態の検証追跡
- コントロール群やフォームの価値の追跡
子コントロールをプロパティとして含み、ビュー上のトップレバーフォームに対応しています。FormGroupは、子FormControlの値を集約する単一のオブジェクトと考えることができます。各フォームコントロールはFormGroupオブジェクトのプロパティです。
次のリストに示されているように、FormGroupクラスを作成できます:
loginForm = new FormGroup({
email: new FormControl(' '),
password: new FormControl(' ')
})
ここにログインフォームを作成しました。これはFormGroupです。メールとパスワードの2つのフォームコントロールで構成されています。次の一覧に示されているように、ビューでFormGroupを使うのは非常に簡単です。
<form [formGroup]='loginForm' novalidate class="form">
<input formControlName='email'
type="text"
class="form-control"
placeholder="Enter Email" />
<input formControlName='password'
type="password"
class="form-control"
placeholder="Enter Password" />
</form>
{{loginForm.value | json}}
{{loginForm.status | json }}
ここではプロパティバインディングを使って、FormGroupをフォームおよびフォームコントロールネームの指示とバインドし、ビュー上の特定の要素にFormControlを接続しています。
テンプレート駆動型フォームを使っている場合、ビューがずっと簡潔になっていることに気づくでしょう。元素にngModelや名前が付加されていません。値とステータスプロパティを使ってフォームの値と状態を確認できます。これでテンプレート参照変数を使ってフォームの状態や値を探す必要はなくなりました。
ステップ5:フォームの提出
フォームを提出するには、フォームに送信ボタンと呼び出す関数を追加します。フォームを以下のように修正します:
<form (ngSubmit)='loginUser()' [formGroup]='loginForm' novalidate class="form">
<input formControlName='email' type="text" class="form-control" placeholder="Enter Email" />
<input formControlName='password' type="password" class="form-control" placeholder="Enter Password" />
<button class="btn btn-default">Login</button>
</form>
コンポーネントクラス では、以下の一覧のようにフォームを提出する関数を追加できます:
export class AppComponent implements OnInit {
loginForm: FormGroup;
ngOnInit() {
this.loginForm = new FormGroup({
email: new FormControl(null, Validators.required),
password: new FormControl()
});
}
loginUser() {
console.log(this.loginForm.status);
console.log(this.loginForm.value);
}
}
ここでは、フォーム送信イベントを処理するためのloginUserという関数を追加しました。この関数内で、FormGroupオブジェクトloginFormのステータスとステータスプロパティを使って読み取ることができます。ご覧の通り、これにより個々のフォームコントロールの値を集約するオブジェクトが得られます。
Step 6: Adding validations
フォームに検証機能を追加していないことに気づいたかもしれません。まずはFormControlsに検証機能を追加しましょう。そのためには、Validatorsをインポートしてください@angular/forms:
ngOnInit() {
this.loginForm = new FormGroup({
email: new FormControl(null, Validators.required),
password: new FormControl(null, [Validators.required, Validators.maxLength(8)])
});
}
テンプレート上で、FormGroupのgetメソッドを使って特定のフォームコントロールのエラーを見つけて利用できます。以下のリストでは、メールの検証エラーを確認し、エラーdivを表示しています。
<div class="alert alert-danger"
*ngIf="loginForm.get('email').hasError('required') && loginForm.get('email').touched">
Email is required
</div>
また、デフォルトで送信ボタンを無効にし、フォームが有効になったら送信を許可することもできます。これは以下のリストに示されているようにできます:
<button [disabled]='loginForm.invalid' class="btn btn-default">Login</button>
すべてを組み合わせると、リアクティブフォーム付きのテンプレートは次のようになります。
<div class="container">
<br />
<form (ngSubmit)='loginUser()' [formGroup]='loginForm' novalidate class="form">
<input formControlName='email' type="text" class="form-control" placeholder="Enter Email" />
<div class="alert alert-danger" *ngIf="loginForm.get('email').hasError('required') && loginForm.get('email').touched">
Email is required
</div>
<input formControlName='password' type="password" class="form-control" placeholder="Enter Password" />
<div class="alert alert-danger" *ngIf=" !loginForm.get('password').valid && loginForm.get('email').touched">
Password is required and should less than 10 characters
</div>
<button [disabled]='loginForm.invalid' class="btn btn-default">Login</button>
</form>
</div>
構成クラスは以下のリストに示されます。
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormArray, Validators } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
loginForm: FormGroup;
ngOnInit() {
this.loginForm = new FormGroup({
email: new FormControl(null, [Validators.required, Validators.minLength(4)]),
password: new FormControl(null, [Validators.required, Validators.maxLength(8)])
});
}
loginUser() {
console.log(this.loginForm.status);
console.log(this.loginForm.value);
}
}
Step 7: Using FormBuilder
FormBuilderはFormGroupとFormControlの構文を簡素化するために使われます。これはフォームが長くなるときに非常に役立ちます。例えば;loginFormをFormBuilderにリファクタリングします。そのためには、まず@angular/formsからFormBuilderをインポートしてください。そして以下のリストに示すようにコンポーネントに注入します:
constructor(private fb : FormBuilder){}
FormBuilderを使って、以下のリストに示すようなリアクティブフォームを作成できます。ご覧の通り、構文が簡略化されています:
this.loginForm = this.fb.group({
email: [null, [Validators.required, Validators.minLength(4)]],
password: [null, [Validators.required, Validators.maxLength(8)]]
})
テンプレートはFormBuilderとFormControlの両方のクラスで同じになります。すべてを合わせると、FormBuilderを使ってリアクティブフォームを作成するコンポーネントは次のようになります。
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormArray, Validators, FormBuilder } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
loginForm: FormGroup;
constructor(private fb: FormBuilder) {
}
ngOnInit() {
this.loginForm = this.fb.group({
email: [null, [Validators.required, Validators.minLength(4)]],
password: [null, [Validators.required, Validators.maxLength(8)]]
})
}
loginUser() {
console.log(this.loginForm.status);
console.log(this.loginForm.value);
}
}
この投稿が好きですか?
そして、これで完了です!この投稿が気に入ったら、共有してください。さらに、Infragistics Ignite UI for Angular Componentsをまだチェックしていない場合は、必ずチェックしてください。彼らは30 +の材料ベースのAngularコンポーネントを持っており、高速なWebアプリをより速くコーディングするのに役立ちます。
