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](https://stackoverflow.com/help/minimal-reproducible-example) — wuerfelfreak, Apr 13 '21 at 10:56

Chiffie · Accepted Answer · 2021-04-13T11:19:28.187

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 '21 at 11:19

answered Apr 13 '21 at 10:58

Chiffie

581
3
18

would you please tell me what #name="ngModel" means – Amrmsmb Apr 13 '21 at 11:02
Its template variables. The way code above works is that it assigns "ngModel" of said input into your template. https://angular.io/guide/template-reference-variables – Chiffie Apr 13 '21 at 11:04
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 – Amrmsmb Apr 13 '21 at 11:09
1 ) simple - more template variables for now (as in angular guide). 2) simple - https://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 Apr 13 '21 at 11:12
i modified the code posted accordingly and now it includes validation to the form as you stated in your answer. but initially when the app starts the button is disabled which is correct as there are no inputs from the user. but after entering data in the first input field"they are four" the button gets enabled which is not desired. all four inputs must be filled – Amrmsmb Apr 13 '21 at 11:34
1

its because all your inputs have same `name` attribute – Chiffie Apr 13 '21 at 11:38
hey, i think this question is for you:https://stackoverflow.com/questions/67085843/how-to-keep-button-disabled-again-when-clearing-the-input-fields – Amrmsmb Apr 14 '21 at 05:10

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

1 Answers1