0

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 labled '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>
Amrmsmb
  • 1
  • 27
  • 104
  • 226
  • can you share your .ts code as well or may be stackblitz, I have doubt you are using ngModel and form attributes together ? Are you using reactive form or template form to be specific ? – Abhinav Kumar Apr 14 '21 at 05:15
  • using this type of validation can bring some issue if you say i can provide the idea how to that. – Toxy Apr 14 '21 at 05:27
  • @Toxy please provide your solution – Amrmsmb Apr 14 '21 at 05:27
  • @AbhinavKumar yes i am using both of them together. please check the posted code – Amrmsmb Apr 14 '21 at 05:28
  • Using both forms together ideally not suggested , until you have specific use, this validation enable disable things quite easy with reactive form, things becomes more complicated when we use together https://stackoverflow.com/questions/55739509/mixing-reactive-form-with-template-form – Abhinav Kumar Apr 14 '21 at 05:37

2 Answers2

0

Clear the actual object's properties (i.e. iMeasureDistanceParametersPasser) rather than clearing the native element's value.

Refer - Reset input value in angular 2

Nugu
  • 852
  • 7
  • 10
0

You should not manipulate with DOM directly

either clear your model in *.component.ts

clearInputs() {
  ...
  // setting it to null would cause nullpointer
  this.iMeasureDistanceParametersPasser = {}
  ...
}

or use #form variable (https://angular.io/guide/template-reference-variables) to reset form in ts

@ViewChild('form')
form: NgForm;
...
clearInputs() {
  ...
  this.form.reset()
  // or
  this.form.resetForm()
  ...
}

or html

<button (click)="form.resetForm()">clear inputs</button>

In future please provide stackblitz (or any other service) example of your code.

Chiffie
  • 581
  • 3
  • 18