angular反応フォーム、1つのフォームが複数の検証エラーを制御するためのエラーメッセージを表示する最良の方法？

Question

angular angular form validation error example の推奨アプローチに従って、反応フォームエラーメッセージを表示しています。

ページにエラーを表示するhtmlコード：

<div [formGroup]="myForm">
  <div>
<input type="text" formControlName="firstName"/>
<div *ngIf="myForm.controls.firstName.invalid"
    class="alert alert-danger">
    <div *ngIf="myForm.controls.firstName.errors.required">
      This Field is Required.
    </div>
    <div *ngIf="myForm.controls.firstName.errors.maxlength">
      your can enter only 50 characters
    </div>
</div>
  </div>
  <div>
<input type="text" formControlName="lastName"/>
<div *ngIf="myForm.controls.lastName.invalid"
    class="alert alert-danger">
    <div *ngIf="myForm.controls.lastName.errors.required">
      This Field is Required.
    </div>
    <div *ngIf="myForm.controls.lastName.errors.maxlength">
      your can enter only 50 characters
    </div>
</div>
  </div>
  </div>

以下の私のコンポーネントコードの参照用です：

this.myForm = this.formBuilder.group({
      firstName:['',[Validators.required,Validators.maxLength(50)]],
      lastName:['',[Validators.required,Validators.maxLength(50)]]
    })

上記のコードが表示された場合、firstNameフィールドとlastNameフィールドに2つの検証を適用しています。

エラーメッセージを表示するために、エラーメッセージを表示するために複数の* ngIf条件を記述しました。

複数の* ngIf条件を記述せずに特定のコントロールの検証メッセージを表示する最良の方法はありますか？エラーコードを表示するために同じコードを異なるコントロール名とバリデーター名で何度も何度も書いているためです。

Answer 1

小さいフォームの場合、通常は*ngIf;ただし、アプリケーションが検証を必要とするほとんどすべてのフォームである場合は、上記のカスタムバリデータディレクティブが役立つことがあります。

ソースを見て、組み込みのバリデーターがどのように設定されているかを確認してください。 https://github.com/angular/angular/blob/2.0.0-rc.3/modules/%40angular/common/src/forms-deprecated/directives/validators.ts#L104-L124 =

これは私が掘り下げた例ですが、ほとんどのユースケースでは少しやり過ぎだと思います。まったく新しい@Attributeではなく、テンプレートHTMLに* ngIf行を記述するだけです...

https://scotch.io/tutorials/how-to-implement-a-custom-validator-directive-confirm-password-in-angular-2