Reset de Signal Forms no Angular

Signal Forms representa uma evolução na forma como gerenciamos entradas de dados, trazendo o poder dos signals para o coração dos formulários.

Com essa nova API, o estado do formulário e os valores dos campos são sincronizados de forma reativa e granular, facilitando o desenvolvimento de interfaces complexas.

Resetar um formulário é uma tarefa essencial em qualquer aplicação, seja após o envio de dados ou por uma ação de cancelamento.

Neste artigo, vamos explorar as duas principais abordagens para realizar esse reset, entendendo a diferença entre limpar apenas os dados ou redefinir completamente o estado de interação do usuário.

Resetando via Form Model

A forma mais direta de alterar os valores de um formulário no Signal Forms é manipulando diretamente o signal que serve como modelo de dados.

Quando você utiliza o método .set() ou .update() no seu formModel, o formulário reflete essas mudanças automaticamente na interface.

No entanto, essa abordagem tem uma limitação importante: ela altera apenas os valores brutos.

Os estados de controle, como dirty (se o campo foi modificado) e touched (se o campo foi focado), permanecem com seus valores atuais, o que pode manter mensagens de validação visíveis indevidamente.

import { Component, signal, ChangeDetectionStrategy } from '@angular/core'
import { form, FormField } from '@angular/forms/signals'

@Component({
	selector: 'app-user-form',
	imports: [FormField],
	template: `
		<form>
			<input [formField]="form.name" placeholder="Nome" />
			<input [formField]="form.email" placeholder="E-mail" />

			<button type="button" (click)="resetModel()">Resetar Apenas Valores</button>
		</form>
	`,
	changeDetection: ChangeDetectionStrategy.OnPush
})
export class UserFormComponent {
	protected formModel = signal({
		name: '',
		email: ''
	})

	protected form = form(this.formModel)

	protected resetModel() {
		// Esta ação reseta os valores, mas mantém os estados 'dirty' e 'touched'
		this.formModel.set({
			name: '',
			email: ''
		})
	}
}

Resetando via API do Form

A segunda abordagem, e geralmente a mais recomendada, é utilizar o método .reset() exposto pela própria instância do formulário.

Diferente da manipulação direta do signal, chamar form().reset() garante que todos os metadados de estado do formulário voltem ao estágio inicial.

Ao utilizar essa função, os estados dirty e touched são automaticamente redefinidos para false.

Para que os valores dos campos também sejam limpos simultaneamente, você deve passar o novo objeto de estado como argumento para a função, garantindo um reset completo e limpo.

import { Component, signal, ChangeDetectionStrategy } from '@angular/core'
import { form, FormField } from '@angular/forms/signals'

@Component({
	selector: 'app-complete-reset',
	imports: [FormField],
	template: `
		<form>
			<input [formField]="form.name" placeholder="Nome" />
			<input [formField]="form.email" placeholder="E-mail" />

			<button type="button" (click)="fullReset()">Reset Completo</button>
		</form>
	`,
	changeDetection: ChangeDetectionStrategy.OnPush
})
export class CompleteResetComponent {
	protected formModel = signal({
		name: '',
		email: ''
	})

	protected form = form(this.formModel)

	protected fullReset() {
		// Reseta os valores e os estados dirty/touched simultaneamente
		this.form().reset({
			name: '',
			email: ''
		})
	}
}

Conclusão

Entender a diferença entre manipular o signal e utilizar a API de reset é fundamental para criar formulários robustos com Angular Signal Forms.

Enquanto a primeira forma é útil para atualizações pontuais de dados, a segunda é a escolha ideal para limpar o formulário após interações, garantindo que a validação visual não confunda o usuário.

Ao adotar o método form().reset(), você mantém a integridade da experiência do usuário, removendo estados de erro e marcações de campos “tocados” de forma automática.

Isso simplifica o código do componente e aproveita ao máximo as capacidades nativas da nova biblioteca de formulários do Angular.