Angular如何根据邮箱输入有效性动态控制提交按钮的禁用启用状态

核心思路 #

直接复用Angular响应式表单内置的dirty（用户已修改）/pristine（用户未修改）状态做判断，不需要额外定义冗余状态变量，实现非常简洁。

1. 优化HTML部分 #

首先修正你原有代码里click事件缺括号的问题，再调整按钮的禁用判断逻辑：

<div style="text-align:right;margin-top: 19.0px;">
    <button (click)="getStarted()" [disabled]="!modelForm.get('emailAddress')?.valid || !modelForm.get('emailAddress')?.dirty" mat-flat-button color="primary"
         class="v-btn-sml" id="get-started-button">
        Get Started
    </button>
</div>

如果想让模板代码更清爽，可以在TS中给邮箱控件加个getter：

// 组件类中新增
get emailCtrl() {
  return this.modelForm.get('emailAddress');
}

之后模板里就可以简化写法：

<button (click)="getStarted()" [disabled]="!emailCtrl.valid || !emailCtrl.dirty" mat-flat-button color="primary" class="v-btn-sml" id="get-started-button">
  Get Started
</button>

2. 调整提交方法逻辑 #

在getStarted方法的业务逻辑执行完成后，把邮箱控件重置为未修改状态即可：

getStarted() {
  // 此处保留你原有提交的业务逻辑
  // ...

  // 提交完成后重置控件修改状态
  this.modelForm.get('emailAddress').markAsPristine();
}

3. 编辑场景适配 #

如果你的表单是编辑场景，初始化时就已经回填了有效的邮箱地址，希望初始状态按钮即可点击，可以在表单初始化完成后手动标记控件为已修改状态：

initFormGroup() {
  this.modelForm = this.formBuilder.group({
    id: [this.model.id || 0],
    emailAddress:[this.model.emailAddress,[Validators.required, Validators.email]],
  });
  // 新增适配逻辑
  if (this.modelForm.get('emailAddress').valid) {
    this.modelForm.get('emailAddress').markAsDirty();
  }
}

逻辑覆盖验证 #

所有需求场景均可完美适配：

• 初始状态邮箱无效 → 按钮禁用
• 用户输入有效邮箱，控件变为已修改+校验通过 → 按钮启用
• 用户点击提交后，控件被重置为未修改状态 → 按钮再次禁用
• 用户修改邮箱后控件重新变为已修改状态，新输入校验通过则按钮重新启用，校验不通过则保持禁用

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