ABP框架7.1 Angular UI：如何重命名用户表单字段并设置必填验证？

一、后端配置（修正原有属性，而非新增） #

你之前的代码错误在于新增了FirstName属性，但实际需要修改IdentityUser自带的Name和Surname属性配置，而非创建新字段。正确配置如下：

ObjectExtensionManager.Instance.Modules()
    .ConfigureIdentity(identity =>
    {
        identity.ConfigureUser(user =>
        {
            // 修改Name属性为First Name，设置必填
            user.ConfigureExistingProperty<string>(nameof(IdentityUser.Name), property =>
            {
                property.DisplayName = L("::FirstName");
                property.Validation.Required = true;
                property.UI.Lookup.DisplayPropertyName = "First Name";
            });

            // 修改Surname属性为Last Name，设置必填
            user.ConfigureExistingProperty<string>(nameof(IdentityUser.Surname), property =>
            {
                property.DisplayName = L("::LastName");
                property.Validation.Required = true;
                property.UI.Lookup.DisplayPropertyName = "Last Name";
            });
        });
    });

补充：本地化资源配置 #

在项目本地化文件（如en.json、zh-Hans.json）中添加对应键值：

{
  "::FirstName": "First Name",
  "::LastName": "Last Name"
}

二、前端Angular配置 #

仅后端配置无法同步Angular UI的表单验证和显示，需通过以下方式修改：

方式1：模块配置覆盖表单元数据 #

在app.module.ts中配置IdentityModule的用户表单扩展：

import { IdentityModule, eIdentityComponents } from '@abp/ng.identity';
import { Validators } from '@angular/forms';

@NgModule({
  imports: [
    IdentityModule.forRoot({
      components: {
        [eIdentityComponents.Users]: {
          createFormProps: {
            name: {
              label: '::FirstName',
              validators: [Validators.required]
            },
            surname: {
              label: '::LastName',
              validators: [Validators.required]
            }
          },
          editFormProps: {
            name: {
              label: '::FirstName',
              validators: [Validators.required]
            },
            surname: {
              label: '::LastName',
              validators: [Validators.required]
            }
          }
        }
      }
    })
  ]
})
export class AppModule {}

三、生成代理并验证 #

1. 运行ABP CLI代理生成命令，同步后端配置到前端：

abp generate-proxy

2. 重启后端和Angular应用，访问用户创建/编辑页面：
   • 字段标签将显示为First Name和Last Name
   • 未填写时表单触发必填验证，无法提交空值

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