いずみこんな悩みを解決できる記事を書きました！
僕は現役フリーランスエンジニア（歴10年）で、資格は13個保有しています。
「Reactive Formsでフォームバリデーションを実装する方法を知りたい」とお考えではありませんか？
Angularでユーザー登録フォームやお問い合わせフォームを作る際、入力チェックの実装方法に悩む方は多いです。
Reactive Formsを使えば、TypeScriptのコード側でバリデーションルールを一元管理することが可能です。
いずみベリーイージーなのでサクッと解説します。
ということで、本記事ではAngularのReactive Formsでフォームバリデーションを実装する方法を解説します。
いずみすぐ読み終わるので、ぜひ最後まで読んでくださいませ。
| 【当サイト】おすすめフリーランスエージェント3選 | |||
|---|---|---|---|
| エージェント | 評価 | ポイント | 公式サイト |
 レバテックフリーランス  | 5.0 | 業界最大級のエージェント。 高単価案件が豊富。 | 公式 |
 Midworks  | 4.8 | 満足度調査で 3年連続3冠を達成。 | 公式 |
 ITプロパートナーズ  | 4.6 | 週2〜3向けの案件が豊富。 | 公式 |
【Angular】Reactive Formsでフォームバリデーションを実装する方法
早速ですが、AngularのReactive Formsでフォームバリデーションを実装する方法を解説します。
Reactive Formsの基本セットアップ
まずは、Reactive Formsを使うための基本セットアップを行います。
スタンドアロンコンポーネントの場合、@angular/formsからReactiveFormsModuleをインポートしてimports配列に追加します。
import { Component } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
@Component({
selector: 'app-profile-form',
standalone: true,
imports: [ReactiveFormsModule],
templateUrl: './profile-form.component.html',
})
export class ProfileFormComponent {}コンポーネントクラス側でFormGroupとFormControlを使ってフォームの構造を定義します。
import { FormControl, FormGroup, Validators } from '@angular/forms';
profileForm = new FormGroup({
username: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
email: new FormControl('', { nonNullable: true, validators: [Validators.required, Validators.email] }),
});nonNullable: trueを指定すると、フォームコントロールの型がnull非許容のstringになります。
いずみTypeScriptの型チェックが効くようになるので、実装中のミスに気づきやすいです。
組み込みバリデータでエラーメッセージを表示する
次に、組み込みバリデータを使ってエラーメッセージをテンプレートに表示します。
<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
<input type="text" formControlName="username" />
<input type="email" formControlName="email" />
<button type="submit">送信</button>
</form><div *ngIf="profileForm.controls.email.touched && profileForm.controls.email.errors?.['required']">
メールアドレスを入力してください
</div>
<div *ngIf="profileForm.controls.email.touched && profileForm.controls.email.errors?.['email']">
メールアドレスの形式が正しくありません
</div>touchedプロパティを条件に加えることで、未入力の状態から即座にエラーメッセージが出る事態を防げます。
いずみエラーオブジェクトのキーごとにメッセージを出し分けられるので、UIが親切になります。
カスタムバリデータを実装する
組み込みバリデータだけでは対応できないルールは、カスタムバリデータで実装します。
import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
export function forbiddenNameValidator(forbiddenName: RegExp): ValidatorFn {
return (control: AbstractControl): ValidationErrors | null => {
const forbidden = forbiddenName.test(control.value);
return forbidden ? { forbiddenName: { value: control.value } } : null;
};
}username: new FormControl('', {
nonNullable: true,
validators: [Validators.required, forbiddenNameValidator(/admin/i)],
}),validators配列に組み込みバリデータとカスタムバリデータを並べて渡すだけで、複数のルールを同時に適用できます。
いずみ正規表現を渡す形にしておくと、禁止ワードのチェックなど別の場面でも使い回せます。
NonNullableFormBuilderで記述を簡潔にする
FormBuilderを使うと、FormGroupの生成を簡潔に書けます。
import { inject } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
private fb = inject(FormBuilder);
profileForm = this.fb.nonNullable.group({
username: ['', Validators.required],
email: ['', [Validators.required, Validators.email]],
});fb.nonNullableを経由すると、各コントロールにnonNullable: trueを個別指定しなくてもnull非許容の型になります。
いずみフォームの項目数が増えるほど、FormBuilderのありがたみを感じます。
| 【当サイト】おすすめフリーランスエージェント3選 | |||
|---|---|---|---|
| エージェント | 評価 | ポイント | 公式サイト |
レバテックフリーランス | 5.0 | 業界最大級のエージェント。 高単価案件が豊富。 | 公式 |
Midworks | 4.8 | 満足度調査で 3年連続3冠を達成。 | 公式 |
ITプロパートナーズ | 4.6 | 週2〜3向けの案件が豊富。 | 公式 |
【厳選】フリーランスエンジニアにおすすめなエージェント3選
フリーランスエンジニアになるにはエージェントから案件をもらう必要があります。
僕が実際に利用しているおすすめエージェントを紹介しますね。
いずみエージェントは必ず複数登録してください。
担当者によっては「全然案件紹介してくれない…」みたいなこともあるので…
僕は実際に5つのエージェントを使い回していますよ。
フリーランスを始めるなら「レバテックフリーランス
」
| 案件数 | マージン率 | 単価 | |
| 約88,000件 | 非公開 | 高 | |
| 初心者 | 福利厚生 | 申し込み | |
| 無料 |
- 業界最大級の案件数。
- 業界トップクラスの高単価報酬、低マージン（平均年収862万円）。
- 案件参画中のフォローの充実。
※詳細は「【業界最大手】レバテックフリーランスとは？メリットや利用手順を解説！」を参照。
レバテックフリーランス
は業界最大手のフリーランスエージェントです。
とにかく案件数が多いので、とりあえず登録しておけば間違いないエージェントです！
いずみ僕もはじめてフリーランスの案件を貰ったのはレバテックフリーランス
です。
保有している案件数が多いので、業務経験がなくても何かしらの案件は紹介してもらえますよ（僕はJavaの経験3年でも案件を貰えました）。
手厚い保障を重視したいなら「Midworks
」
| 案件数 | マージン率 | 単価 | |
| 約10,000件 | 非公開 | 中 | |
| 初心者 | 福利厚生 | 申し込み | |
| 無料 |
- 手厚い保障で正社員並みの安心感。
- 還元率60％超え＆単価公開でクリアな契約。
- 給与保障制度（審査あり）。
Midworks
は手厚い保障が特徴のフリーランスエージェントです。
フリーランスを目指しているけど不安な方や保障を重視したい方におすすめです。
いずみ僕も何度か案件を紹介してもらいました。
自分のスキルに合った案件を紹介してもらえましたし、電話のやり取りも非常に丁寧でした。
週2〜3日の案件探しなら「ITプロパートナーズ
」
| 案件数 | マージン率 | 単価 | |
| 約5,000件 | 非公開 | 高 | |
| 初心者 | 福利厚生 | 申し込み | |
| 経験者向け | 無料 |
- IT案件に特化したフリーランスエージェント。
- 週2〜3日の案件が豊富。
- リモート案件が多く、直エンドなので単価も高い。
※詳細は「【週2・3案件】ITプロパートナーズとは？メリットや利用手順を解説！」を参照。
ITプロパートナーズ
はIT案件に特化したフリーランスエージェントです。
週2〜3日から参画できる案件が豊富なので、起業したい人にもおすすめです。
いずみ週2〜3日の案件はある程度スキルがないと紹介してもらえない印象です。
とはいえ、週5の案件ももちろんありますし、僕が利用した時は迅速・丁寧に対応していただきました！
よくある質問
Reactive FormsとTemplate-driven Formsはどちらを使うべきですか？
複雑なバリデーションや動的なフォーム構成を扱う場合は、Reactive Formsが向いています。
フォームの構造がコンポーネントクラス側に集約されるため、単体テストも書きやすくなります。
バリデーションエラーメッセージを日本語にするにはどうすればいいですか？
組み込みバリデータはエラーコードのオブジェクトのみを返す仕様になっています。
テンプレート側でerrorsオブジェクトのキーごとに条件分岐し、日本語のメッセージを出し分けます。
重複チェックのような非同期バリデーションは実装できますか？
AsyncValidatorFnを実装し、FormControlの第三引数（asyncValidators）に渡すことで対応できます。
Observableを返す関数として実装し、APIへの問い合わせ結果に応じてエラーオブジェクトを返す形になります。
まとめ
今回は、AngularのReactive Formsでフォームバリデーションを実装する方法について解説しました。
以下が本記事のまとめになります。
- おすすめ本
Angularの勉強なら「Angularアプリケーションプログラミング」が分かりやすくておすすめですよ♪
いずみ最後までお読みいただき、ありがとうございました！
| 【当サイト】おすすめフリーランスエージェント3選 | |||
|---|---|---|---|
| エージェント | 評価 | ポイント | 公式サイト |
レバテックフリーランス | 5.0 | 業界最大級のエージェント。 高単価案件が豊富。 | 公式 |
Midworks | 4.8 | 満足度調査で 3年連続3冠を達成。 | 公式 |
ITプロパートナーズ | 4.6 | 週2〜3向けの案件が豊富。 | 公式 |
- クソおすすめ本
いずみ海外のエンジニアがどういった思考で働いているかが理解できます。
海外に行く気はないけど海外エンジニアの動向が気になる雑魚エンジニアにおすすめです（本当におすすめな本しか紹介しないのでご安心を）。
