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>

Hint How to create a Minimal, Reproducible Example

wuerfelfreak
– wuerfelfreak

2021-04-13 10:56:32 +00:00
Commented Apr 13, 2021 at 10:56 — wuerfelfreak
– wuerfelfreak, Commented Apr 13, 2021 at 10:56

Chiffie · Accepted Answer · 2021-04-13 11:19:28Z

2

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>

edited Apr 13, 2021 at 11:19

answered Apr 13, 2021 at 10:58

Chiffie

6515 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Amrmsmb Over a year ago

would you please tell me what #name="ngModel" means

Chiffie Over a year ago

Its template variables. The way code above works is that it assigns "ngModel" of said input into your template. angular.io/guide/template-reference-variables

Amrmsmb Over a year ago

great, but it is for single input , what about four input fields please. would you please edit your answer to accommodate multiple input fields please

Chiffie Over a year ago

1 ) simple - more template variables for now (as in angular guide). 2) simple - angular.io/api/forms/NgForm -form.valid 3) time consuming but worth - study about injection, directives, services, formcontrol, controlvalueaccessor ngform etc. and you can create thing i described

Chiffie Over a year ago

its because all your inputs have same name attribute

|

Collectives™ on Stack Overflow

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

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related