【OpenHarmony/HarmonyOs 】ArkUI 添加与编辑复用一个弹窗：表单状态管理实战

2502_94757980

139人浏览 · 2026-07-22 13:24:10

2502_94757980 · 2026-07-22 13:24:10 发布

【OpenHarmony/HarmonyOs 】ArkUI 添加与编辑复用一个弹窗：表单状态管理实战

前言

添加网站和编辑网站需要的字段基本相同，如果分别写两个弹窗，会重复布局、校验和错误提示。LinkOS 链界使用 editingSiteId 区分模式，让同一套表单同时完成新增与更新。本文从状态设计一直讲到提交、防重复点击和异常处理。📝

一、表单需要哪些状态

@State showAddDialog: boolean = false;
@State editingSiteId: string = '';
@State siteTitleInput: string = '';
@State siteUrlInput: string = '';
@State submitting: boolean = false;
@State formError: string = '';

空 editingSiteId 表示新增，非空表示编辑。标题和按钮文字都由这个状态派生：

Text(this.editingSiteId ? '编辑自定义网站' : '添加自定义网站')
Button(this.editingSiteId ? '保存' : '添加')

不要再额外维护 isEditMode，否则两个状态可能互相矛盾。

二、打开新增模式

private openCreateDialog(): void {
  this.editingSiteId = '';
  this.siteTitleInput = '';
  this.siteUrlInput = '';
  this.formError = '';
  this.showAddDialog = true;
}

每次打开前重置旧值很重要。否则用户上次取消输入的内容可能出现在下一次新增中。

三、打开编辑模式并回填

private openEditDialog(item: UrlItem): void {
  this.editingSiteId = item.id;
  this.siteTitleInput = item.title;
  this.siteUrlInput = item.url;
  this.formError = '';
  this.showAddDialog = true;
}

页面只保存正在编辑的 ID 和表单草稿，不直接双向绑定原对象。用户点击取消时，原列表数据不会被提前修改。

四、输入控件与即时状态

TextInput({
  text: this.siteTitleInput,
  placeholder: '网站名称'
})
  .onChange((value: string) => {
    this.siteTitleInput = value;
    this.formError = '';
  })

TextInput({
  text: this.siteUrlInput,
  placeholder: 'https://example.com'
})
  .onChange((value: string) => {
    this.siteUrlInput = value;
    this.formError = '';
  })

输入阶段可以做基础提示，但最终校验必须在 Service 层再次执行，因为业务规则不能只依赖 UI。

五、统一提交函数

private async submitSiteForm(): Promise<void> {
  if (this.submitting) return;
  this.submitting = true;
  this.formError = '';

  const service = EntryManageService.getInstance();
  try {
    if (this.editingSiteId) {
      this.customSites = await service.updateCustomSite(
        this.editingSiteId,
        { title: this.siteTitleInput, url: this.siteUrlInput }
      );
    } else {
      this.customSites = await service.addCustomSite(
        this.siteTitleInput,
        this.siteUrlInput
      );
    }
    this.closeSiteDialog();
  } catch (error) {
    this.formError = this.mapSiteError(error);
  } finally {
    this.submitting = false;
  }
}

提交期间禁用按钮，可以防止连续点击创建重复数据。只有服务成功返回后才关闭弹窗；失败时保留用户输入，方便修改后重试。

六、把业务错误翻译成用户文案

Service 抛出稳定错误代码：

private mapSiteError(error: Object): string {
  const message = `${error}`;
  if (message.includes('EMPTY_TITLE')) return '请输入网站名称';
  if (message.includes('INVALID_URL')) return '请输入有效的 HTTPS 地址';
  if (message.includes('DUPLICATE_URL')) return '该网站已经收藏';
  if (message.includes('NOT_FOUND')) return '该网站已不存在，请刷新后重试';
  return '保存失败，请稍后重试';
}

错误最好显示在相关输入框附近。AlertDialog 更适合阻断性错误，普通表单校验使用行内文案更高效。

七、关闭时彻底清理

private closeSiteDialog(): void {
  this.showAddDialog = false;
  this.editingSiteId = '';
  this.siteTitleInput = '';
  this.siteUrlInput = '';
  this.formError = '';
}