AngularのValidationではまったお話

AngularのFormControlで、minlengthを使用した際にハマッた箇所があったので書いてみました。

Angular公式ドキュメントだと、以下のような例で書かれていますが、実行してみると上手く動作しません。

<div *ngIf="name.errors.minlength">
  4文字以上で入力してください
</div>

どうやら、インプットの中の値を上手く認識していない様子です。
ではエラーを見てみましょう。

TypeError: Cannot read property 'minlength' of null

調べてみると、『errors?』で上手く認識するようです。

<div *ngIf="name.errors?.minlength">
  4文字以上で入力してください
</div>

errors.maxlengthでも同じ動きをするようなので、
errors?.maxlengthを使用します。