how to enable or disable a button based on the inputs to the input fields

Question

i have four input html fields and one button. what i want to do is, to make the button active and enabled only when there is four inputs in each input field. if there is at least one input field empty, then the button must be disabled

i think i need to bind on some attributes in the input fields please let me know how this can be achieved

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="name"
                        [(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="name"
                            [(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="name"
                        [(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="name"
                            [(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
                        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>

Answer 1

There is tutorial for that on angular page

tldr;

<input  name="property" required minlength="4" 
      [(ngModel)]="property" #ngModelVar="ngModel">

<button [disabled]="ngModelVar.invalid && (ngModelVar.dirty || ngModelVar.touched)">test</button>

However this is not optimal way to do things. Be sure to read about FormControl.

The way we do things in big apps (really big forms with multiple validating conditions etc.) is to create a directive that matches [name][ngModel]. Then we create service that injects NgForm in construrcotr. And at last when we want to validate our form at page we ask MyFormService if this.myFormService.ngForm.valid.

There is lot to do but this is the concept that proved great. With little work you can create reactive template driven forms.

Note: Also you should always let user to click the button, then if something is wrong show him popup why you dont allow him to do an action.

Edit:

You can disable button if form is invalid like this (but button has to be inside form element)

<button [disabled]="form.invalid">test</button>