How can I keep button disabled again when clearing the input fields?

I have four input html fields and two buttons. initially these two buttons are enabled only when the four input fields contain values, when there is at least one input field has no value entered by the user then the two buttons are disabled. the problem is, that the button that is labeled 'Clear_Data' when pressed it clears all the input fields by setting their values to empty string as follows:

clearInputs() {
(document.getElementById("startLngTextId") as HTMLInputElement).value = "";
(document.getElementById("startLatTextId") as HTMLInputElement).value = "";
(document.getElementById("endLngTextId") as HTMLInputElement).value = "";
(document.getElementById("endLatTextId") as HTMLInputElement).value = "";
this.showMeasuredDistance = false;
}


now after clearing the four inpus the two buttons that are labled

{{ "DISTANCE_MEASUREMENT.ENTRY_LABEL" | translate }}


and {{ "COMMON.CLEAR_DATA" | translate }}

are enabled again despite there are no data in the input fields. so how to keep button disabled when clearing the input fields

code:

<div class="modal-body">
<form #form="ngForm" class="clr-form clr-form-horizontal" autocomplete="off">
<clr-input-container>
<label >{{ "DISTANCE_MEASUREMENT.START_LONGITUDE" | translate }}:</label>
<input
id="startLngTextId"
required
maxlength="25"
clrInput
type="text"
name="name1"
[(ngModel)]=iMeasureDistanceParametersPasser.startLongitude
/>
</clr-input-container>
<clr-input-container>
<label>{{ "DISTANCE_MEASUREMENT.START_LATITUDE" | translate }}:</label>
<input
id="startLatTextId"
required
maxlength="25"
clrInput
type="text"
name="name2"
[(ngModel)]=iMeasureDistanceParametersPasser.startLatitude

/>
</clr-input-container>
<clr-input-container>
<label>{{ "DISTANCE_MEASUREMENT.END_LONGITUDE" | translate }}:</label>
<input
id="endLngTextId"
required
maxlength="25"
clrInput
type="text"
name="name3"
[(ngModel)]=iMeasureDistanceParametersPasser.endLongitude

/>
</clr-input-container>
<clr-input-container>
<label>{{ "DISTANCE_MEASUREMENT.END_LATITUDE" | translate }}:</label>
<input
id="endLatTextId"
required
maxlength="25"
clrInput
type="text"
name="name4"
[(ngModel)]=iMeasureDistanceParametersPasser.endLatitude
/>
</clr-input-container>
<div>
<button
[disabled]="form.invalid"
class="btn btn-primary"
type="button"
(click)="measureDistanceForCoordinates()"
>
{{ "DISTANCE_MEASUREMENT.ENTRY_LABEL" | translate }}
</button>
</div>
<div>
<button
[disabled]="form.invalid"
class="btn btn-primary"
type="button"
(click)="clearInputs()"
>
{{ "COMMON.CLEAR_DATA" | translate }}
</button>
</div>
<div>
<label *ngIf=showMeasuredDistance>
{{ "DISTANCE_MEASUREMENT.DISTANCE" | translate }}
{{ "DISTANCE_MEASUREMENT.EQUAL" | translate }}
{{ mMeasuredDistanceInKM }}
{{ "DISTANCE_MEASUREMENT.UNIT_KM" | translate }}
</label>
</div>

</form>
<div class="modal-footer">
<button
class="btn btn-outline"
type="button"
(click)="hideWindowOverlay()"
>
{{ "COMMON.CANCEL" | translate }}
</button>
</div>
</div>

Continue reading...