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