2017-07-15 33 views
1

角度2では、ユーザーがフィールド領域を離れると、クライアント側の検証を行います。これは、ユーザーが電子メールや電話のようなフィールドに入ると、完全な電子メールの入力が完了するまで常にエラーがスローされ、これは最適なユーザーエクスペリエンスではないからです。この問題を解決する方法に私を助けて角度2のフォーム検証エラー

<div class="addres"> 
    <label class="form_label asterisk">Address Line 1</label> 
    <textarea class="form_input " formControlName="address1"></textarea> 
    <div class="error" *ngIf="addDealerForm.controls['address1'].errors && (addDealerForm.controls['address1'].touched)"> 
     <div *ngIf="addDealerForm.controls['address1'].hasError('required')"> 
      Address1 is required. 
     </div> 
     <div *ngIf="addDealerForm.controls['address1'].hasError('maxlength')"> 
      Exceeded maximum character length. 
     </div> 
     <div *ngIf="addDealerForm.controls['address1'].hasError('minlength')"> 
      Enter minimum character length. 
     </div> 
    </div> 
</div> 

現在、私は

address1: ['', Validators.compose([Validators.required, 
       Validators.maxLength(128), Validators.minLength(5)])], 

テンプレートを使用していました。

+0

を助けるかもしれ参照んあなただけ'.touched'の代わりに' .dirty'を使いたいとします。 – developer033

答えて

0

(blur)メソッドで検証を設定する必要があると思います。 EX用

//コンポーネント

onBlur() { 
     this.formControl.get(name).setValidators('', [Validators.minLength(3)); 
    } 

//フォーム

<textarea class="form_input " formControlName="address1" (blur)="onBlur()"></textarea> 

このヘルプ

もこのdiscussionは、私が思うフル

+1

ありがとうshailesh – dineshkd

関連する問題