Angular2 form validation for focus()

Question

<div class="col-md-3">
    <div class="md-form selecticon form-group rupee-icon" [ngClass]="{'has-error':!loanApplyForm.controls['propval'].valid &&loanApplyForm.controls['propval'].touched}">
        <label class="lf-loan-input-label" for="propval">Property Value * </label>
        <input #iw_propval (focus)="iw_propval.value = ''" class="form-control emi-input" id="propval" [formControl]="loanApplyForm.controls['propval']"
            type="number">
        <div *ngIf="!loanApplyForm.controls['propval'].valid&& loanApplyForm.controls['propval'].touched" class="alert-change">*Please enter the property value.</div>

    </div>
</div>

This is my .html file.here i am using the focus() method to empty the field on click.but when i focus field the field shows still ng-valid and not showing the error message.my .ts file is all correct.problem with focus method.if i remove focus method from input tag it works fine.The problem is with the condition that i gave in the error message.so what condition i want to give validate this focus method.please help me.Thanks in advance.

Answer 1

Resetting the formcontrol value should work:

.....(focus)="loanApplyForm.controls['propval'].reset()"