Angular模态弹窗表单Required必填校验不生效如何修复

• 响应式表单与模板驱动表单混写：你给输入框加了[(ngModel)]并配置[ngModelOptions]="{standalone: true}"，这些输入框会完全脱离validatingForm表单组的管控，TS里给FormGroup配置的Validators.required规则根本不会生效。
• 控件命名不匹配：TS中定义的FormControl名称（如requester_full_name）和HTML中输入框的标识（req_full_name）不对应，即便移除ngModel也无法完成绑定。
• 提交逻辑无校验拦截：提交按钮直接绑定modal.close()事件，点击后直接关闭弹窗提交，完全没有触发表单校验的步骤。
• 错误提示代码全被注释：即便校验规则触发，用户也看不到对应的错误提醒。

1. 统一使用响应式表单写法，移除混写的ngModel逻辑 #

响应式表单不需要[(ngModel)]做双向绑定，所有值、校验规则统一由FormGroup管控。先把所有输入框上的[(ngModel)]、[ngModelOptions]、原生required属性全部删除，改用formControlName绑定TS中定义的表单控件，formControlName的取值必须和TS里FormGroup定义的控件名完全一致。
示例输入框写法：

<!-- 姓名输入框 -->
<input id="req_full_name" name="req_full_name" class="form-control" formControlName="requester_full_name" />
<!-- 邮箱输入框，其余输入框按相同规则绑定对应formControlName即可 -->
<input id="req_email" name="req_email" class="form-control" formControlName="requester_email" />

注意：打开弹窗的Enable Access按钮不在表单内，把它的type="submit"改成type="button"，避免误触发表单默认提交行为：

<button style="margin-left: 70%" type="button" class="btn btn-primary" (click)="open(content)">EnableAccess</button>

2. 修正TS层表单定义与提交逻辑 #

首先确保当前组件所属的Angular模块已经在imports数组中引入了ReactiveFormsModule，移除不需要的FormsModule导入，修正表单定义、新增统一提交方法：

import { FormControl, Validators, FormGroup } from '@angular/forms';

validatingForm: FormGroup;
constructor() {
  this.validatingForm = new FormGroup({
    dbname: new FormControl('', Validators.required),
    tablename: new FormControl('', Validators.required),
    tablelocation: new FormControl('', Validators.required),
    requester_full_name: new FormControl(null, Validators.required),
    // 邮箱字段可额外增加邮箱格式校验
    requester_email: new FormControl(null, [Validators.required, Validators.email]),
    manager_email: new FormControl(null, [Validators.required, Validators.email]),
    // 禁用的bucket_name直接在FormControl中配置禁用状态，不要在HTML上加disabled属性
    bucket_name: new FormControl({value: null, disabled: true}, Validators.required),
    bucket_prefix: new FormControl(null, Validators.required),
    reason: new FormControl(null, Validators.required),
    request_level_access: new FormControl(null, Validators.required),
    arn: new FormControl(null, Validators.required)
  });
}

// 新增表单提交方法
submitForm(modal) {
  // 标记所有控件为已触碰状态，触发错误提示显示
  this.validatingForm.markAllAsTouched();
  // 表单校验不通过直接阻断提交
  if (this.validatingForm.invalid) {
    return;
  }
  // 校验通过后获取表单值（getRawValue可获取到禁用控件的值），执行后续提交逻辑
  const formData = this.validatingForm.getRawValue();
  // 这里写你的提交业务逻辑
  modal.close('Save click');
}

3. 修正表单提交绑定与错误提示 #

把表单的提交事件绑定到新增的submitForm方法上，移除提交按钮上直接关闭弹窗的点击事件：

<form [formGroup]="validatingForm" (ngSubmit)="submitForm(modal)">
  <!-- 这里放所有表单项，每个表单项下方放开之前注释的错误提示，示例如下 -->
  <div class="form-group">
    <label for="arn"> ARN </label>
    <div class="input-group">
      <input id="arn" name="arn" class="form-control" formControlName="arn">
    </div>
    <!-- 控件被触碰且存在必填错误时显示提示 -->
    <small *ngIf="validatingForm.get('arn').touched && validatingForm.get('arn').hasError('required')" class="text-danger"> ARN is required </small>
  </div>
</form>
<div class="modal-footer">
  <!-- 提交按钮改为触发表单ngSubmit事件，可加disabled属性在表单无效时禁用按钮 -->
  <button type="submit" class="btn btn-primary" [disabled]="validatingForm.invalid"> Submit </button>
  <button type="button" class="btn btn-danger" (click)="modal.dismiss('dismiss')"> Cancel </button>
</div>

其余字段的错误提示按照ARN的写法对应修改判断的控件名即可。

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