[Anderson Paraibano]

Resumo:

Neste artigo, vamos abordar um problema comum que ocorre ao usar o formulário Angular formArrayName juntamente com formControlName em um formulário HTML. Especificamente, discutiremos como o valor de formControlName pode ficar incorreto ao excluir um índice do array subjacente ao formArrayName. Também forneceremos uma solução para esse problema.

Introdução:

O Angular é um framework amplamente utilizado para o desenvolvimento de aplicativos da web. Ele fornece recursos poderosos para criar e manipular formulários, permitindo que os desenvolvedores gerenciem facilmente a entrada de dados do usuário. O formArrayName é uma das diretivas fornecidas pelo Angular para lidar com formulários que contêm matrizes dinâmicas de controles.

O problema:

Ao usar formArrayName em conjunto com formControlName, podemos criar uma matriz de controles em nosso formulário HTML. Por exemplo, imagine que estamos construindo um formulário para coletar informações de várias tarefas. Cada tarefa possui um título e uma descrição. Podemos usar formArrayName para criar um array de tarefas e formControlName para vincular os campos de título e descrição aos respectivos controles.

No entanto, surge um problema quando excluímos um índice específico da matriz de tarefas usando a função removeAt fornecida pelo formArrayName. Ao remover um índice, os controles restantes são reindexados, e o Angular atualiza automaticamente os valores formControlName para refletir essa reindexação. No entanto, pode acontecer de o formControlName ficar associado ao valor errado, resultando em dados incorretos sendo exibidos no formulário.

A solução:

Para resolver esse problema, podemos fazer uso do atributo trackBy fornecido pelo Angular para melhorar a precisão das associações entre os controles e seus valores correspondentes. O trackBy permite especificar uma função que identifica exclusivamente cada item da matriz. Ao fornecer uma função de rastreamento personalizada, garantimos que os controles permaneçam associados aos valores corretos, mesmo após a reindexação.

Aqui está um exemplo de como usar o trackBy para solucionar o problema mencionado acima:

html
Copy code
<form [formGroup]=”taskForm”>
<div formArrayName=”tasks”>
<div *ngFor=”let task of tasks.controls; let i = index; trackBy: trackByFn”>
<input type=”text” [formControlName]=”i”>
<button (click)=”removeTask(i)”>Remover</button>
</div>
</div>
</form>
Neste exemplo, adicionamos o atributo trackBy ao loop *ngFor que itera sobre os controles das tarefas. A função trackByFn é uma função personalizada que retorna um identificador exclusivo para cada item da matriz. Uma maneira comum de implementar essa função é retornar o próprio índice:

typescript
Copy code
trackByFn(index: number, item: any): number {
return index;
}
Ao fornecer o identificador exclusivo para cada item do array, garantimos que os controles permaneçam associados corretamente aos seus valores, mesmo quando a reindexação ocorre após a remoção de um índice específico.

Conclusão:

O uso de formArrayName em conjunto com formControlName é uma técnica eficaz para lidar com formulários que envolvem matrizes dinâmicas de controles. No entanto, é importante estar ciente do problema potencial de associação incorreta do valor ao excluir um índice do array. Felizmente, podemos resolver esse problema usando o atributo trackBy e fornecendo uma função de rastreamento personalizada. Com essa solução, podemos garantir que os valores exibidos nos campos de formulário permaneçam corretos, mesmo após a reindexação dos controles.

[Autor]

Posts