Angular表单保存时显示旧值 NgRx状态管理场景下如何解决

• 子表单的ngOnChanges生命周期未做输入值校验，只要contactForm输入属性发生任何变更（包括保存时NgRx Store返回的旧值、加载状态联动的变更），都会直接调用createForm()重置整个表单，把用户输入的新值覆盖为传入的旧值
• 父组件的contactForm是基于selectedContact的getter，每次变更检测都会返回引用，只要Store中selectedContact未及时更新为新值，就会持续向子表单注入旧值

方案1：限制子表单初始化时机，仅首次打开时赋值 #

修改子组件的ngOnChanges逻辑，编辑过程中不再响应输入值变更，避免旧值覆盖：

export class ContactFormComponent implements OnChanges {
  // 新增标识位，标记表单是否已经完成初始化
  private isFormInitialized = false;

  public ngOnChanges(changes: SimpleChanges): void {
    // 仅当contactForm第一次传入、且表单未初始化时才重建表单
    if (changes.contactForm?.currentValue && !this.isFormInitialized) {
      this.createForm();
      this.isFormInitialized = true;
    }
  }

  // 关闭表单时重置标识位，下次打开重新初始化
  public emitCancel(): void {
    this.isFormInitialized = false;
    this.cancel.emit();
  }

  public emitSave(): void {
    this.form.markAllAsTouched();
    if (this.form.valid) {
      const contact = new Contact(this.form.value);
      this.save.emit(contact);
      // 保存成功后也重置标识位
      this.isFormInitialized = false;
    }
  }
}

方案2：父组件仅在模态框打开时赋值一次初始值 #

修改父组件逻辑，编辑过程中断开表单与StoreselectedContact的联动：

export class ContactModalComponent {
  // 替换原有的getter，改为普通变量存储表单初始值
  public contactForm!: Contact | null;
  private destroy$ = new Subject<void>();

  public constructor(
    private store: Store<ContactPartialState>,
    configurationStore: Store<ConfigurationState>,
  ) {
    this.isPopupOpen$ = store.select(contacttQuery.getIsContactOpen);
    this.loading$ = store.select(contactQuery.getLoading);
    // 仅在模态框打开的瞬间赋值一次初始值
    this.isPopupOpen$.pipe(
      filter(isOpen => isOpen),
      takeUntil(this.destroy$)
    ).subscribe(() => {
      this.contactForm = this.selectedContact;
    })
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
  // 移除原来的contactForm getter
}

方案3：保存过程加锁临时暂停更新（适合需要后续同步最新值的场景） #

如果需要在保存完成后同步最新的Store数据到表单，可以在保存过程中加锁，阻止中间状态的旧值覆盖：

export class ContactFormComponent implements OnChanges {
  private isSaving = false;
  private destroy$ = new Subject<void>();

  @Input() set loading(val: boolean) {
    this._loading = val;
    // 保存完成后解锁并更新表单为最新值
    if (this.isSaving && !val) {
      this.isSaving = false;
      this.createForm();
    }
  }
  get loading() { return this._loading }
  private _loading = false;

  public ngOnChanges(changes: SimpleChanges): void {
    // 保存过程中不响应任何contactForm变更
    if (!this.isSaving && changes.contactForm?.currentValue) {
      this.createForm();
    }
  }

  public emitSave(): void {
    this.form.markAllAsTouched();
    if (this.form.valid) {
      this.isSaving = true;
      const contact = new Contact(this.form.value);
      this.save.emit(contact);
    }
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

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