アングル4のリアクティブフォームのサブミットまたはブラーで検証を適用するにはどうすればよいですか？

Question

私はAnger 4プロジェクトに取り組んでいます。その中で、私は反応型と角度検証を使用しました。すべての検証メッセージは、フィールド外のフォーカスに表示されます。しかし、私は送信ボタンの上にも検証メッセージを表示したい。 HTMLコード：

<form [formGroup] = "addNewCustomerForm" (ngSubmit) = "submitAddNewCustomerForm()"> 
    <div class="form-group"> 
     <label>First Name</label> 
     <input class="form-control" [class.alert-border]="addNewCustomerForm.controls['first_name'].hasError('required') && addNewCustomerForm.controls['first_name'].touched" placeholder="Ex: James" formControlName="first_name"> 
    </div> 
    <small *ngIf="addNewCustomerForm.controls['first_name'].hasError('required') && addNewCustomerForm.controls['first_name'].touched" class="required alert-error"><i class="material-icons">error</i> Please enter a valid first name.</small> 
    <small *ngIf="addNewCustomerForm.controls['first_name'].hasError('pattern') && addNewCustomerForm.controls['first_name'].touched && !addNewCustomerForm.controls['first_name'].hasError('required')" class="patern alert-error"><i class="material-icons">error</i> Please enter a valid first name.</small> 

    <div class="form-group"> 
     <label>Last Name</label> 
     <input class="form-control" [class.alert-border]="addNewCustomerForm.controls['last_name'].hasError('required') && addNewCustomerForm.controls['last_name'].touched" placeholder="Ex: Lee" formControlName="last_name"> 
    </div> 
    <small *ngIf="addNewCustomerForm.controls['last_name'].hasError('required') && addNewCustomerForm.controls['last_name'].touched" class="required alert-error"><i class="material-icons">error</i> Please enter a valid last name.</small> 
    <small *ngIf="addNewCustomerForm.controls['last_name'].hasError('pattern') && addNewCustomerForm.controls['last_name'].touched && !addNewCustomerForm.controls['last_name'].hasError('required')" class="patern alert-error"><i class="material-icons">error</i> Please enter a valid last name.</small> 

    <div class="form-group"> 
     <label>Email Address</label> 
     <input class="form-control" [class.alert-border]="addNewCustomerForm.controls['email_id'].hasError('required') && addNewCustomerForm.controls['email_id'].touched" placeholder="Ex: example@xyz.com" formControlName="email_id" (focusin)="emailExist = false" (focusout)="checkEmailExistance($event)"> 
    </div> 
    <small *ngIf="addNewCustomerForm.controls['email_id'].hasError('required') && addNewCustomerForm.controls['email_id'].touched" class="required alert-error"><i class="material-icons">error</i> Please enter a valid email.</small> 
    <small *ngIf="addNewCustomerForm.controls['email_id'].hasError('pattern') && addNewCustomerForm.controls['email_id'].touched && !addNewCustomerForm.controls['email_id'].hasError('required')" class="patern alert-error"><i class="material-icons">error</i> Please enter a valid email.</small> 
    <small *ngIf="emailExist" class="alert-error"><i class="material-icons">error</i> This email already exists. Please try with different email.</small> 
</form> 

TSコード：

this.addNewCustomerForm = this.formGroup.group({ 
     first_name   : [null, [Validators.required, Validators.pattern(this.regExpression)]], 
     last_name   : [null, [Validators.required, Validators.pattern(this.regExpression)]], 
     email_id   : [null, [Validators.required, Validators.pattern(this.emailPattern)]] }); 

submitAddNewCustomerForm(){ 
    if(this.addNewCustomerForm.valid) 
    { 
    console.log(this.addNewCustomerForm.value); 
    } 
} 

Answer 1

は、さてあなたは、2つのオプションがあり、

一つは： - フォームがある場合は、あなたの提出機能にブール変数を持っており、場合にtrueを設定します無効で、エラーブロックのngIf条件で使用します。 以下はその例です。

submitAddNewCustomerForm(){ 
    if(this.addNewCustomerForm.invalid) 
    { 
     this.showError = true; 
    } 
    } 

とHTMLエラーで

<small *ngIf="(showError || (addNewCustomerForm.controls['last_name'].hasError('pattern') && addNewCustomerForm.controls['last_name'].touched)) && !addNewCustomerForm.controls['last_name'].hasError('required')" class="patern alert-error"><i class="material-icons">error</i> Please enter a valid last name.</small> 

及び第二のオプションは、

this.controlName.markAsDirty() 

それとも

this.form.get('controlName').markAsDirty() 

Answer 2

であなたもこれを達成することができますを使用して、汚れた各コントロールをマークしていますフォームごとの指示に従う提出した部分についてはWN here

、あなたが持っている残りの部分に沿ってフォームにテンプレートの参照を追加します

<form .... #formDir="ngForm"> 

をif文次に、あなただけのぼかし機能のために、あなたにformDir.submittedを追加することができますフィールドがtouchedであることを確認することができます。あなたのifステートメントでは、実際のフォームコントロールを変数に代入してコードを短縮することができますが、これはもちろん必須ではありませんが、可読性のために私はそれを行います。例えば、ビルド後にfirst_nameの変数を使用します。形式：

this.firstNameCtrl = this.addNewCustomerForm.get('first_name'); 

次に、あなたのテンプレートで、あなたが望むものを達成するために、次の操作を行うことができます

<small *ngIf="firstNameCtrl.hasError('required') && 
       (formDir.submitted || firstNameCtrl.touched) ">...</small>