この記事の目的
この記事は、
Angular Materialを使ったForm開発
を目的としています。
本題
ReactiveFormsModuleの有効化
モデル駆動型で開発する場合は、ReactiveFormsModuleを有効にする必要があるため、App.moduleとか、Main.moduleに、ReactiveFormsModuleをImportsします。
FormControlの作成
最終的に、FormGroupのインスタンスにFormContorolを紐づけてHtml側に渡すことになりますので、FormGroupを作る前に、必要となるFormContorolを作成します。
//Sample 1 private mail = new FormControl("aaa", [Validators.required]); //Sample2 private name = new FormControl( { value: "name-value", disabled: true }, [Validators.required] );
第二引数で与えているValidatorsには、必須チェックのほか、Min/Max Length, min/max, 正規表現、メールアドレス形式チェックがあるそうです。
angular.jp
FormGroupの作成
Controlができたので、それらをまとめるFormGroupを作成します。
myForm = this._formBuilder.group({ mail: this.mail, name: this.name });
プロパティは、紐づけるインスタンスと同じ名前にしておくのが無難そうです。
画面の作成
Angular Materialのコードをそのまま利用します。Formタグに、FormGroup属性を付け、２つあるmat-form-field タグ内のInputタグと、textareaタグに、formControlName属性を付け、ひとつ前のステップで作成したFormGroupのプロパティ名を加えると、完成です。
<form class="example-form" [formGroup]="myForm"> <mat-form-field class="example-full-width"> <mat-label>Favorite food</mat-label> <input matInput placeholder="Ex. Pizza" formControlName="mail"> </mat-form-field> <mat-form-field class="example-full-width"> <mat-label>Leave a comment</mat-label> <textarea matInput placeholder="Ex. It makes me feel..." formControlName="name"></textarea> </mat-form-field> </form>
FromをSubmitしてみる
ここまでで、画面に入力項目を表示し、その入力項目ごとに入力チェック仕様を追加することができました。最後に、FormをSubmitしてバックエンドにメッセージを送信する手前までの実装を行います。
Formタグ内に、Buttonタグを配置します。ここでは、Angular materialのButtonのサンプルから一つ持ってきたものを利用しています。このButtonタグに、Type="Submit"属性を付与します。さらに、Form内の状態をみて、Validateにエラーがない時だけButtonを押下できるようにするため、[disabled]属性を付与します。
<button mat-raised-button color="primary" type="submit" [disabled]="!myForm.valid" >Primary</button>
次に、Formタグに変更を加えます。属性に(ngSubmit)="onSubmit()" を追加します。これで、FormがSubmitされたときに呼び出すModule(or Component)側のメソッドを定義することができます。この時点では、OnSubmitメソッドをModule側に定義していないので、次に定義します。
<form class="example-form" [formGroup]="myForm" (ngSubmit)="onSubmit()">
一般的なメソッドをModule側に追加します。今回は、呼び出すべきサーバーがないので、ログを表示するだけにとどまっています。FormGroupに所属しているFormControlの値を呼び出したい場合は、次の例のように、Valueプロパティの後に、知りたいControlの名前を実装することで、呼び出すことができます。
onSubmit() {
console.info(this.myForm.value.mail);
console.info(this.myForm.value.name);
}
ButtonのOnClickでメソッド読んでもよいかもしれない・・・
まとめ
こんな感じ。
- Form Controlの作成
- Form Group の作成
- ControlをGroupに紐づける
- Formタグの画面を構成する
- Form Group/Controlの情報を画面のそれぞれのコントロールに紐づける
- Submit用の設定を追加する
- Submitメソッドを実装する
