ANgular2- Display validation message only when user leaves out the fields - angular2-template

Question

I am using formGroup for form validation in angular2.I am doing a validation for Phone Number.I want the validation message to be displayed only when user leaves the field/tabs out.Right now, the validations are working fine but the validation message appears even when I am focused to the field.
For ex.- If I try to change the phone number and make the digits equal to 10 , it throws error(though I have not tabbed out).I want the error to be displayed only when I tab out. Any idea what am i missing here.
<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>

Answer 1

Try using blur
<input (blur)="onBlur()" (focus)="onFocus()">
and then activate the message only if onblur was called.

Answer 2

you should try 'ngTouch'
instead of "|| paymentDetailsForm.controls['officePhone'].touched"
should write "&& paymentDetailsForm.controls['officePhone'].touched"
for example :
<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>