Angular 4：HTML表单控件访问与基于状态控制按钮启用/禁用

我来帮你梳理下这个问题的解决方案，你用的是Angular的模板驱动表单，刚好我对这块很熟悉～

1. 核心：根据表单整体状态控制按钮启用/禁用 #

你已经给表单定义了#shiftForm="ngForm"，直接利用这个表单对象的valid属性就能控制按钮状态。把按钮的disabled属性绑定到!shiftForm.valid就可以了：

<button type="submit" [disabled]="!shiftForm.valid">提交</button>

2. 补全单个输入框的校验提示逻辑 #

你代码里的*ngIf="..."部分，需要判断当前输入框的校验状态。因为每个输入框都定义了#shiftName="ngModel"，可以通过这个对象获取校验细节：

• shiftName.invalid：控件是否无效
• shiftName.touched：用户是否触碰过该控件（避免页面刚加载就显示错误）
• shiftName.dirty：控件值是否被修改过
• shiftName.errors?.required：具体的错误类型（这里是必填项错误）

结合起来，错误提示的代码可以写成这样：

<div *ngIf="shiftName.invalid && (shiftName.touched || shiftName.dirty)" class="text-danger">
  <div *ngIf="shiftName.errors?.required">班次名称为必填项</div>
</div>

3. 关键注意点：循环表单控件的name属性冲突 #

你现在循环里的每个input的name都是shiftName，这会导致Angular无法正确识别每个独立的表单控件，进而影响校验结果。必须给每个input设置唯一的name属性，比如利用循环索引或者item的唯一标识：

<tbody *ngFor="let item of Items; let i = index">
  <tr>
    <td>
      <div class="form-group">
        <!-- 用索引生成唯一name -->
        <input class="form-control" type="text" required 
               name="shiftName{{i}}" [(ngModel)]="item.ShiftName" 
               #shiftName="ngModel" id="shiftName{{i}}">
        <!-- 错误提示 -->
        <div *ngIf="shiftName.invalid && (shiftName.touched || shiftName.dirty)" class="text-danger">
          <div *ngIf="shiftName.errors?.required">班次名称为必填项</div>
        </div>
      </div>
    </td>
  </tr>
</tbody>

完整整合示例代码 #

把这些逻辑整合后，你的表单代码会变成这样：

<form novalidate #shiftForm="ngForm">
  <table>
    <thead>
      <th>Name</th>
      <th>time</th>
    </thead>
    <tbody *ngFor="let item of Items; let i = index">
      <tr>
        <td>
          <div class="form-group">
            <input class="form-control" type="text" required 
                   name="shiftName{{i}}" [(ngModel)]="item.ShiftName" 
                   #shiftName="ngModel" id="shiftName{{i}}">
            <div *ngIf="shiftName.invalid && (shiftName.touched || shiftName.dirty)" class="text-danger">
              <div *ngIf="shiftName.errors?.required">班次名称为必填项</div>
            </div>
          </div>
        </td>
        <td>
          <!-- 时间控件示例，同样注意唯一name -->
          <input class="form-control" type="time" required 
                 name="shiftTime{{i}}" [(ngModel)]="item.ShiftTime" 
                 #shiftTime="ngModel" id="shiftTime{{i}}">
          <div *ngIf="shiftTime.invalid && (shiftTime.touched || shiftTime.dirty)" class="text-danger">
            <div *ngIf="shiftTime.errors?.required">时间为必填项</div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
  <button type="submit" [disabled]="!shiftForm.valid">提交所有班次</button>
</form>

这样一来，当所有表单控件都通过校验时，提交按钮会自动启用；只要有一个控件不符合要求（比如未填写必填项），按钮就会保持禁用状态，同时用户触碰或修改控件后会显示对应的错误提示。

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