Início / coding / Perguntas / 79586501
Accepted
Zed
Asked: 2025-04-22 20:44:26 +0800 CST

Problema com patchValue e sinais async no Angular quando o usuário atualiza a página

  • 772

Estou trabalhando com o novo recurso Sinais do Angular para gerenciar o estado reativo em um formulário.

Tudo funciona bem na maioria dos casos. No entanto, estou enfrentando um problema:

Quando um usuário atualiza a página enquanto estiver no formulário, o componente é recarregado. Os dados que deveriam preencher o formulário são buscados de forma assíncrona e expostos por meio de um Signal. Mas o formulário é inicializado antes que o sinal obtenha seu valor.

Então, quando eu chamo form.patchValue(...)durante ngOnInit, os valores do sinal ainda são undefined.

Também considerei usar um effect() para atualizar o formulário de forma reativa quando o sinal muda, mas, de acordo com a documentação do Angular, effect() não foi criado para esse tipo de lógica.


// 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 respostas

  1. Best Answer

    Usando effect(Inicialização única):

    Use esta abordagem para sincronizar dinamicamente o sinal com o formulário apenas uma vez.

    Eu costumo effectRef.destroy()forçar que a inicialização aconteça apenas uma vez.

    O sinal pode disparar a qualquer momento, então você precisa reagir a isso. Uma opção é usar o effectpatch para corrigir o valor quando o sinal for atualizado.

    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.
        }
    });
}

    Inicializando o formulário usando computed(Recompute em cada mudança de sinal):

    Caso de uso:

    Tenho um recurso que busca dados de uma entidade, então pego esses dados e os uso computedpara aplicar os valores ao formulário. Como o recurso é uma inicialização única, não precisamos nos preocupar com recomputação.

    Este método pode não ser ideal para o seu cenário.

    Use esta abordagem para sincronizar dinamicamente o sinal com o formulário com valores de sinal durante a inicialização.

    Estou testando essa nova abordagem e ela parece ser estável e confiável para inicializar o formato angular.

    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;
});

    Ao usar isso, não se esqueça de executar o sinal:

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

relate perguntas