【Angular】FormsModuleを使ったバリデーションチェック

2021年12月11日

以前FormsModuleを使ってフォームを実装する方法を紹介していきました。(NgModelはこちら、NgFormはこちら
今回はそれらのフォームにバリデーションチェックを追加していきます。(ReactiveFormsModulesを使ったバリデーションについてはこちら

スポンサーリンク

バリデーションを設定する

HTMLファイルを以下のように編集してみます。

<p>ringo works!</p>
<p>入力された項目:</p>
<p  *ngIf="ringo.errors == null">{{inputText}}</p>
<p>林檎</p>
<input type="text"
[(ngModel)]="inputText"
#ringo = "ngModel"
required 
minlength="3"
maxlength="10">
<p *ngIf="ringo.errors != null && ringo.errors['required'] !=null">必須項目です。</p>
<p *ngIf="ringo.errors != null && ringo.errors['minlength'] !=null">3文字以上で入力してください。</p>
<p *ngIf="ringo.errors != null && ringo.errors['maxlength'] !=null">10文字以上で入力してください。</p>
<br>

黄色く塗った部分以外は、入力フォームに入力された文字を画面上部の「入力された項目:」に表示するだけの画面です。
<input>タグにrequiredという設定を加えることで、必須入力項目となります。
minlength、maxlengthは設定した数値が文字数の最小数、最大数となります。
そしてこれらのチェックでエラーとなる場合、例えば文字数11文字を入力したとすると、
ringo.errors.maxlengthに値が設定されます。
またいずれのバリデーションチェックにかかった場合でも、ringo.errorsに値が設定されます。
これらの値がnullかどうかを条件式で確かめることで、エラーメッセージを表示したりしなかったりできます。

では、実際の画面を見てみましょう。

まず、何も入力していない場合は、必須項目についてのエラーメッセージが表示されます。
次に1文字だけ入力してみると、

最小文字数チェックにかかりました。
では、正常系(3文字以上、10文字以下)で入力してみるとこうなります。

エラーメッセージが消え、入力値が画面上部に表示されています。

終わりに

今回とてもシンプルにですが、FormsModuleのバリデーションチェックについて紹介しました。
バリデーションチェックで使える項目としては、今回紹介した必須項目や文字数チェック以外にも
文字パターンを正規表現で指定したり、数値の最大、最小値を設定出来たりもします。

スポンサーリンク

Angular開発

Posted by 社畜林檎