How to get ngmodel reference inside for loop

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>

Continue reading...