フォームグループの妥当性確認

Question

提出時にもメッセージを表示したいので、送信時に検証する方法を教えてください。私は、テンプレート主導のアプローチ、 を使用する場合 ここに私のhtml

<input type="text" class="form-control" formControlName="code" required> 
<label [hidden]="ascForm.controls.code.valid || (ascForm.controls.code.pristine && ascForm.submitted)" class="errorMsg">Cannot save. You must specify a code.</label> 

この検証条件が正常に動作しているが、今私は私が条件を提出修正してください駆動モデルを使用しています。

Answer 1

一般的なアプローチは、フォームが完全に有効になるまで、送信ボタンをに無効です。

しかし、ユーザーが実際にフォームを送信したときにのみメッセージを表示する場合は、FormComponentのブール値プロパティで作成して、フォームを投稿しようとしたことを示します。同様に：

submitAttempt: boolean = false; 

とフォームを送信上、コンポーネントにあなたはtrueに設定します。

submitForm() { 
    this.submitAttempt = true; 
    ... 
    } 

あなたは、あなたのメッセージだけsubmitAttempt == trueを絞り込むことができます。以下のような：のためのlabelタグを使用しないでください。

PS（すばやく参照部分を見つけるために、 'submitAttempt' のページを検索）Angular 2 forms validation、：深い説明について

<span *ngIf="!code.valid && submitAttempt">Required</span> 

、この記事を参照してください検証エラーを示しています。これは、フォーム入力のラベル付けに実際に使用する必要があります。