AngularのFormについて
今回はAngularのFormについて書いていこうと思います。Form関連はつまずきポイントだと思います。僕自身もFormでつまずきました。マークアップはAngular Materialでほぼほぼのことはできるので使用をお勧めします。
僕のプロジェクトではForm関連が３つあります。ユーザープロフィール、企業側のプロフィール、記事（求人）投稿のフォームがあります。Formを作成するにあたり必要になったのが
１, FormControl
2, FormGroup
3, Validation
4, submitイベント
5, Autocomplete
この５つです。ざっと僕の用語の理解を深めることも兼ねて僕なりにまとめました。
1つ目のFormControlはリアクティブフォームを使う上でもっとも基本的な構成要素で、フォーム入力の状態の監視、更新、バリデーションを行うことができるようになります。
get nameControl() {
return this.form.get('name') as FormControl;
}
get departmentControl() {
return this.form.get('department') as FormControl;
}
get lastNameControl() {
return this.form.get('lastName') as FormControl;
}
get firstNameControl() {
return this.form.get('firstName') as FormControl;
}
get emailControl() {
return this.form.get('email') as FormControl;
}
get telControl() {
return this.form.get('tel') as FormControl;
}
get passwordControl() {
return this.form.get('password') as FormControl;
}僕はこのようにhtml側のFormControlNameをget()でとっています。
２つ目の、FormGroupはFormの複数のフィールドの状態の監視、更新などを１つのFormGroupにまとめることによって監視が楽になります。
<form [formGroup]="form" class="profile">４つ目のValidationは、正しい形式や、条件を満たしたものしかFormの送信を制御するためのものです。Validatorsに条件を割り当てます。簡単にいってしまえば間違っていたらエラーを出してくれるということです。よく使う項目としては、Validators.required入力必須、Validators.maxLength()最大文字数、Validators.pattern()正規表現、ここら辺がもっともよく使うバリデーションだと思います。
form = this.fb.group({
name: ['', [Validators.required]],
department: ['', []],
lastName: ['', [Validators.required, Validators.maxLength(30)]],
firstName: ['', [Validators.required, Validators.maxLength(30)]],
email: ['', [Validators.required, Validators.email]],
tel: ['', [Validators.required, Validators.pattern(/^0\d{9,10}$/)]],
password: [
'',
[Validators.required, Validators.pattern(/^([a-zA-Z0-9]{8,})$/)]
]
});
4つ目は、(ngSubmit)="submit()"、送信イベントです。formの送信をすることができるメソッドです。
<form [formGroup]="form" (ngSubmit)="submit()" class="recruitment">５つ目はAutocomplete（自動補完）機能についてです。Formを入力していて住所や電話番号などFormのフィールドをクリックしただけで自分の住所、電話番号が出てくるといった体験をしたことがあると思います。これはAutocomplete機能によって実装されています。詳しくはここで説明するよりMDNを参照した方がいいと思うのでリンクを載せておきます。
今回は簡単な用語の解説をしました。詳しくは公式ドキュメントに全て載っているので見てみてください。
何か間違った認識をしていたらぜひご教授していただけると幸いです。。
次回は１つ１つ詳しくみていこうと思います。