ABP Angular UI中实现必填项为空时禁用表单提交按钮

ABP框架的账户个人设置表单默认未将保存按钮的禁用状态与表单整体有效性绑定，因此即使必填字段为空触发验证，按钮仍处于启用状态。以下是两种可行的解决方法：

在你的validatePersonalSettingsContributors函数末尾，添加表单保存按钮的配置逻辑，让按钮根据表单有效性自动禁用：

export function validatePersonalSettingsContributors(
  propList: FormPropList<UpdateProfileDto>
) {
  // 你的现有字段重写代码...

  // 添加保存按钮禁用规则
  propList.form.saveButtonOptions = {
    disabled: (form) => form.invalid || form.pending
  };
}

该配置会让按钮在表单无效（必填项为空等）或处于异步加载状态（比如时区下拉选项加载中）时自动禁用。

如果方案1未生效，或需要自定义按钮逻辑，可以通过重写组件实现：

1. 创建自定义组件
   新建custom-personal-settings.component.ts：

import { Component, OnInit } from '@angular/core';
import { PersonalSettingsComponent } from '@abp/ng.account';

@Component({
  selector: 'app-custom-personal-settings',
  templateUrl: './custom-personal-settings.component.html'
})
export class CustomPersonalSettingsComponent extends PersonalSettingsComponent implements OnInit {
  ngOnInit(): void {
    super.ngOnInit();
  }
}

2. 编写组件模板
   新建custom-personal-settings.component.html，复制原组件模板并修改保存按钮的禁用条件：

<abp-card>
  <abp-card-header>
    <h5>{{ 'AbpAccount::PersonalSettings' | abpLocalization }}</h5>
  </abp-card-header>
  <abp-card-body>
    <form [formGroup]="form" (ngSubmit)="submit()">
      <abp-form-group [formProps]="formProps" [form]="form"></abp-form-group>

      <div class="mt-3">
        <button
          abp-button
          type="submit"
          [disabled]="form.invalid || form.pending"
          status="primary"
        >
          {{ 'AbpAccount::Save' | abpLocalization }}
        </button>
      </div>
    </form>
  </abp-card-body>
</abp-card>

3. 替换默认组件
   在你的功能模块中替换ABP的默认个人设置组件：

import { NgModule } from '@angular/core';
import { AccountModule, PersonalSettingsComponent } from '@abp/ng.account';
import { CustomPersonalSettingsComponent } from './custom-personal-settings.component';

@NgModule({
  declarations: [CustomPersonalSettingsComponent],
  imports: [AccountModule],
  providers: [
    {
      provide: PersonalSettingsComponent,
      useClass: CustomPersonalSettingsComponent
    }
  ]
})
export class CustomAccountModule {}

• 检查自定义字段的Validators.required是否正确生效，可通过浏览器开发者工具查看表单控件的invalid状态。
• 确认时区Typeahead控件在未选择选项时，控件处于invalid状态，确保异步验证逻辑正常。

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