How to get ngmodel reference inside for loop

Issue

I have a three-dimensional array which I am looping over in my template using ng for. In the third level, I am using the ng model to get the change in the model. I have a submit button in the loop at the first level.

I am trying to access the value of the ng-model at the first level(in submit button) because I want to disable the button if all the values of the models are blank. If any of the models have value then the button will not be disabled anymore.

<ng-container *ngFor="let zone of driverHoursZones">
    <div class="card">
        <div class="card-body">
            <h5 class="pb-2">{{ zone.zoneName }}</h5>
            <div class="table_scroll">
                <table class="table table-striped table-hover table-bordered">
                    <thead>
                        <tr>
                            <th>Driver Name</th>
                            <th
                                *ngFor="
                                    let date of dates
                                "
                            >
                                {{ date }}
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <ng-container
                            *ngFor="
                                let driver of zone.drivers
                            "
                        >
                            <tr>
                                <td>
                                    {{ driver.driverName }}
                                </td>
                                <ng-container
                                    *ngFor="
                                        let hour of driver.hours
                                    "
                                >
                                    <td>
                                        <span class="d-flex line_h">
                                            <input
                                                type="text"
                                                mask="Hh:m0:s0"
                                                class="form-control"
                                                placeholder="HH:MM:SS"
                                                [(ngModel)]="hour.hours"
                                                [dropSpecialCharacters]="false"
                                            />
                                        </span>
                                    </td>
                                </ng-container>
                            </tr>
                        </ng-container>
                    </tbody>
                </table>
            </div>
            //trying to access the values of the models here
            // if all the values are blank button will be disabled
            <button
                type="button"
                class="btn btn-primary btn-lg float-end mt-3"
                (click)="saveDriverHours($event, zone)"
            >
                Save
            </button>
        </div>
    </div>
</ng-container>

Solution

Add a property inside your component to check if the button should be disabled something like

 get isButtonDisalbed(){
    return this.driverHoursZones?.every(z=> z.drivers?.every(d=> d?.hours.every(h=> !h?.hours)))
  }

then on your button use this property to disable

<button  type="button" class="btn btn-primary btn-lg float-end mt-3" (click)="saveDriverHours($event, zone)" [disabled]="isButtonDisalbed">
  Save
</button>

Working StackBlitz

Answered By - jitender