如何在Angular的*ngFor循环中获取ngModel值控制按钮禁用状态

步骤1：在组件类中添加判断方法 #

在你的组件.ts文件里，新增一个方法用来检查当前区域（zone）下是否存在已填写的工时值：

hasNonEmptyHours(zone: any): boolean {
  // 遍历当前区域下的所有司机
  for (const driver of zone.drivers) {
    // 遍历每个司机的工时条目
    for (const hour of driver.hours) {
      // 检查工时值是否非空（去除前后空格后判断）
      if (hour.hours?.trim()) {
        return true;
      }
    }
  }
  // 所有值都为空时返回false
  return false;
}

步骤2：修改模板中的按钮禁用属性 #

把模板里的保存按钮加上[disabled]绑定，根据上面方法的返回值控制禁用状态：

<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>
            <!-- 根据判断结果控制按钮禁用状态 -->
            <button
                type="button"
                class="btn btn-primary btn-lg float-end mt-3"
                (click)="saveDriverHours($event, zone)"
                [disabled]="!hasNonEmptyHours(zone)"
            >
                Save
            </button>
        </div>
    </div>
</ng-container>

说明 #

• 方法hasNonEmptyHours会逐层遍历当前zone下的司机和对应的工时条目，只要找到一个非空（且去除前后空格后仍有内容）的hour.hours值，就返回true，否则返回false。
• 按钮的[disabled]属性绑定!hasNonEmptyHours(zone)，意思是：当所有值都为空时（方法返回false），按钮禁用；只要有一个值非空（方法返回true），按钮启用。
• 如果需要更严谨的判断（比如验证工时格式是否符合HH:MM:SS），可以在判断时加入格式校验逻辑。

内容的提问来源于stack exchange，提问作者RAHUL KUNDU