ANgular2-僅在用戶離開字段時顯示驗證消息

我正在使用formGroup進行表單驗證angular2.I正在對電話號碼進行驗證。我希望驗證消息僅在用戶離開字段/選項卡時才顯示現在，驗證工作正常，但驗證信息即使在我專注於該領域時也會出現。例如，如果我嘗試更改電話號碼並使數字等於10，它會引發錯誤（儘管我沒有標籤出來）。我只希望在顯示時顯示錯誤。任何想法，我在這裏失蹤。ANgular2-僅在用戶離開字段時顯示驗證消息

<form [formGroup]="paymentDetailsForm"> 
    <md-input formControlName="officePhone" placeholder="Primary Contact Phone" name="officePhone" [(ngModel)]="paymentform.officePhone" (blur)="registerChaseUser()" (keyup)="numberKeyed($event.target.value)" [restrictKey]="'^[0-9]+$'" noSpace="true" maxlength="14" required></md-input> 
     <span *ngIf="!paymentDetailsForm.controls['officePhone'].valid && (!paymentDetailsForm.controls['officePhone'].pristine || paymentDetailsForm.controls['officePhone'].touched || showPaymentError) && paymentform.officePhone.length == 0" class="validation validation-fix">This field is required.</span> 
     <span *ngIf="(paymentform.officePhone.length < 14) && (paymentform.officePhone.length > 0) && (!paymentDetailsForm.controls['officePhone'].pristine || paymentDetailsForm.controls['officePhone'].touched)" class="validation validation-fix">Please enter a full 10-digit phone number.</span> 
    </form>

來源

2017-04-18 techie questie

如果您檢查感動不應該工作？ – LLL

它工作正常，但即使在我嘗試更改數字時也會報錯。 –

嘗試使用模糊

<input (blur)="onBlur()" (focus)="onFocus()">

，然後激活僅當的onblur被稱爲消息。

來源

2017-04-18 18:36:02 LLL

嗨，你應該試試'ngTouch' – Houtan

你應該嘗試 'ngTouch'

instead of "|| paymentDetailsForm.controls['officePhone'].touched" 
should write "&& paymentDetailsForm.controls['officePhone'].touched"

例如：

  <form *ngIf="active" id="contactForm" (ngSubmit)="onContactSubmit()" [formGroup]="contactForm"> 
       <div class="row"> 
        <div class="col-sm-6 form-group"> 
         <label for="first-name"> First Name</label> 
         <input class="form-control" type="text" formControlName="firstName"> 
         <p *ngIf="!contactForm.controls.firstName.valid&&contactForm.controls.firstName.touched" class="alert alert-danger"> 
          firstname is required 
         </p> 
        </div> 
        <div class="col-sm-6 form-group"> 
         <label for="last-name"> Last Name</label> 
         <input class="form-control" type="text" formControlName="lastName"> 
         <p *ngIf="!contactForm.controls.lastName.valid&&contactForm.controls.lastName.touched" class="alert alert-danger">lastname is required</p> 
        </div> 
       </div> 
      </form>

來源

2017-05-19 14:38:31 Houtan

ANgular2-僅在用戶離開字段時顯示驗證消息

回答

相關問題