主页 / coding / 问题 / 79586501
Accepted
Zed
Asked: 2025-04-22 20:44:26 +0800 CST

用户刷新页面时 Angular 中的 patchValue 和异步信号出现问题

  • 772

我正在使用 Angular 的新信号功能来管理表单中的反应状态。

大多数情况下一切正常。但是，我遇到了一个问题：

当用户在表单上刷新页面时，组件会重新加载。表单所需的数据会被异步获取，并通过 暴露出来Signal。但表单在信号获取值之前就已经初始化了。

因此，当我调用form.patchValue(...)during 时ngOnInit，信号的值仍然是undefined。

我还考虑过使用 effect() 在信号改变时主动更新表单，但根据 Angular 文档，effect() 并不适用于这种逻辑。


// user userApplication Component
  get customer(): Signal<Customer | null> {
    return this._store.customer;
  }

// form Component

ngOnInit(): void {
    const customer = this.userApplication.customer();
    if (customer && customer.identity) {
      const identity = customer.identity;
      this.identity.patchValue({
        title: identity.title,
        firstName: identity.firstName,

      });
    }
  }

  

  identity = inject(FormBuilder).group({
    title: new FormControl<string | null>(null),
    firstName: new FormControl<string>('', [Validators.required]),
   
  });
angular

1 个回答

  1. Best Answer

    使用effect（单一初始化）：

    使用这种方法只需一次即可将信号动态同步到表单。

    我使用effectRef.destroy()强制初始化仅发生一次。

    信号可以随时触发，因此您需要对此做出反应，一种选择是effect在信号更新时修补值。

    identity = inject(FormBuilder).group({ 
    title: new FormControl<string | null>(null), 
    firstName: new FormControl<string>('', [Validators.required]),
});

constructor(): void { 
    const effectRef = effect(() => {
        const customer = this.userApplication.customer();
        if (customer && customer.identity) {
            const identity = customer.identity;
            this.identity.patchValue({
                title: identity.title,
                firstName: identity.firstName,
            });
            effectRef?.destroy(); // after patching kill the effect.
        }
    });
}

    使用以下方法初始化表单computed（每次信号变化时重新计算）：

    用例：

    我有一个获取实体数据的资源，然后我获取该数据并将computed其值修补到表单中，由于该资源是单一初始化，我们不必担心重新计算。

    此方法可能并不适合您的情况。

    使用这种方法在初始化期间将信号动态同步到具有信号值的表单。

    我正在尝试这种新方法，它似乎是一种稳定可靠的初始化角度形式的方法。

    private formBuilder = inject(FormBuilder);

initializeForm() {
    return this.formBuilder.group({ 
        title: new FormControl<string | null>(null), 
        firstName: new FormControl<string>('', [Validators.required]),
    });
}

identityForm = computed(() => {
    const identity = this.initializeForm();
    const customer = this.userApplication.customer();
    if (customer && customer.identity) {
        const identity = customer.identity;
        identity.patchValue({
            title: identity.title,
            firstName: identity.firstName,
        });
    }
    return identity;
});

    当你使用它时，不要忘记执行信号：

    <form [formGroup]="identityForm()">
    ...
</form>
    • 1

相关问题