「ダーティ」および「タッチ」イベントだけでなく、送信時にリアクティブ フォームのすべてのバリデータをトリガーする方法はありますか?
その理由は、フィールドが必須かどうかが示されていない非常に大きなフォームがあり、ユーザーが必須のコントロールの一部を見逃す可能性があるためです。そのため、送信時に、エンドユーザーが見逃した無効なフィールドがすべて表示されることが予想されます。
私はフォームを「タッチ済み」としてマークしようとしました。
FormGroup.markAsTouched(true);
うまくいったので、「汚い」とマークしてみました
FormGroup.markAsDirty(true);
しかし、クラスのCSSはまだ「ng-pristine」のままです。
コンポーネントから手動でトリガーする方法はありますか。グーグルで検索してみましたが、見つかりません。よろしくお願いします。
アップデート
FormGroup.controls を反復処理して「ダーティ」としてマークすることで、すでに動作していますが、これを行う「標準的な」方法はありますか。
ベストアンサー1
これは、提示されたサンプルで達成できますここ、ここでディレクティブを利用できますNgForm:
<form [formGroup]="heroForm" #formDir="ngForm">
そして、検証メッセージでフォームが送信されたかどうかを確認します。
<small *ngIf="heroForm.hasError('required', 'formCtrlName') && formDir.submitted">
Required!
</small>
編集: も提供されていますが、これはフォームに{ updateOn: 'submit'}何もない場合にのみ機能し、いずれにせよ最初に表示されます。ただし、フィールドがタッチされたかどうかをチェックすることでこれを抑制できます。requiredrequired
// fb is 'FormBuilder'
this.heroForm = this.fb.group({
// ...
}, { updateOn: 'submit'})