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 >
<div >
<h5 >{{ zone.zoneName }}</h5>
<div >
<table >
<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 >
<input
type="text"
mask="Hh:m0:s0"
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"
(click)="saveDriverHours($event, zone)"
>
Save
</button>
</div>
</div>
</ng-container>
CodePudding user response：
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" (click)="saveDriverHours($event, zone)" [disabled]="isButtonDisalbed">
Save
</button>
CodePudding user response：
This is my version of the solution, subscribe to form value changes, then set the disabled attribute property, so that its a bit more performant!
ts
import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';
@Component({ selector: 'app', templateUrl: 'app.component.html' })
export class AppComponent {
@ViewChild('testForm') testForm: NgForm;
disabled = true;
driverHoursZones: any = [
{
zoneName: 'test',
drivers: [
{
driverName: 'test',
hours: [
{ hours: 1 },
{ hours: 2 },
{ hours: 3 },
{ hours: 4 },
{ hours: 5 },
],
},
],
},
];
dates = new Array(5).map((x) => new Date());
ngAfterViewInit() {
this.testForm.form.valueChanges.subscribe(() => {
this.disabled = false;
for (let key in this.testForm.form.controls) {
const value = this.testForm.form.controls[key];
if (value && value.errors && value.errors.required) {
this.disabled = true;
}
}
});
}
}
html
<ng-container *ngFor="let zone of driverHoursZones">
<div >
<div >
<h5 >{{ zone.zoneName }}</h5>
<div >
<form #testForm="ngForm">
<table >
<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; let i = index"
>
<td>
<span >
<input
required
[id]="zone.zoneName driver.driverName 'hours' i"
[name]="
zone.zoneName driver.driverName 'hours' i
"
type="text"
mask="Hh:m0:s0"
placeholder="HH:MM:SS"
[(ngModel)]="hour.hours"
/>
</span>
</td>
</ng-container>
</tr>
</ng-container>
</tbody>
</table>
</form>
</div>
//trying to access the values of the models here // if all the values are
blank button will be disabled
<button
[disabled]="disabled"
type="button"
(click)="saveDriverHours($event, zone)"
>
Save
</button>
</div>
</div>
</ng-container>