Form Reset Mechanisms in Angular 2: Evolution from Manual Reset to Built-in Methods

Overview of Form Reset Mechanisms in Angular 2

In early versions of Angular 2, form reset presented a relatively complex challenge as the framework lacked direct methods to restore forms to their pristine state. Developers typically needed to manually reset form control values and error states or reconstruct entire ControlGroups. As Angular 2 evolved, starting with RC.6, the framework introduced a built-in reset() method that significantly simplified form reset operations. This article examines these different implementation approaches in detail, providing practical code examples.

Early Solutions: Manual Reset and ControlGroup Reconstruction

In Angular 2 RC.5 and earlier versions, form reset typically required manual handling by developers. A common approach involved iterating through all form controls to reset their values and error states individually:

reset() {
    for (let name in this.form.controls) {
        this.form.controls[name].updateValue('');
        this.form.controls[name].setErrors(null);
    }
}

While this method clears form values and error states, it cannot reset the form's pristine and touched states to their initial values. Therefore, a more comprehensive solution involves encapsulating form building logic into a separate method and recalling it when reset is needed:

createForm() {
    this.name = new Control('', Validators.required);
    this.email = new Control('', Validators.required);
    this.username = new Control('', Validators.required);

    this.form = this.builder.group({
        name: this.name,
        email: this.email,
        username: this.username
    });
}

reset() {
    this.createForm();
}

This approach completely rebuilds the form, restoring all states to their initial values. However, it may encounter issues with view updates, as Angular's change detection mechanism might not properly handle complete ControlGroup replacement.

RC.6 and Later Improvements: Built-in reset() Method

Starting with Angular 2 RC.6, the FormGroup class introduced a built-in reset() method that not only resets form values but also restores the form's pristine, touched, and submitted states to their initial values:

this.form.reset();

This method significantly simplifies form reset operations, eliminating the need for manual control iteration or complete form reconstruction. The reset() method recursively resets values and states for all controls within the form, ensuring complete restoration to the initial state. Additionally, it supports an optional parameter for setting post-reset form values:

this.form.reset({name: 'default', email: '', username: ''});

Special Considerations for Form Validators

In certain scenarios, merely calling the reset() method may not sufficiently reset the form, particularly when forms contain complex validation logic. To ensure validators are properly reset, a combined approach using the *ngIf directive can be employed:

<form *ngIf="showForm" [formGroup]="createParkingForm" (ngSubmit)="createParkingSubmit()">
    <!-- form controls -->
</form>

In the component, form re-rendering is controlled through the showForm variable:

showForm: boolean = true;

createParkingSubmit() {
    this.showForm = false;
    setTimeout(() => {
        this.prepareForm();
        this.showForm = true;
    });
}

prepareForm() {
    this.createParkingForm = this.formBuilder.group({
        'name': ['', Validators.compose([Validators.required, Validators.minLength(5)])],
        'company': ['', Validators.minLength(5)],
        // other form controls
    });
}

This method ensures complete reset of all validators and form states by temporarily hiding and recreating the form. Although it creates a brief visual disappearance of the form, it provides the most thorough reset mechanism.

Alternative Approach: NgForm.resetForm() Method

Beyond using FormGroup's reset() method, Angular also provides the resetForm() method of the NgForm directive. This method is specifically designed for template-driven forms, resetting the associated FormGroup and setting the submit flag to false:

<form (ngSubmit)="mySubmitHandler(); myNgForm.resetForm()" #myNgForm="ngForm">
    <!-- form controls -->
</form>

The resetForm() method internally calls FormGroup's reset() method while additionally handling form submission state. This approach is particularly suitable for direct template invocation without requiring additional reset logic in the component.

Best Practices and Performance Considerations

When selecting a form reset method, several factors should be considered:

1. Angular Version: For RC.6 or later versions, prioritize the FormGroup.reset() method as the most concise and efficient solution.
2. Form Complexity: For simple forms, directly calling reset() suffices; for forms with complex validation logic, combining with *ngIf approach may be necessary to ensure complete reset.
3. Performance Impact: Reconstructing entire ControlGroups or using *ngIf toggling may trigger additional change detection and DOM operations, requiring careful consideration in performance-sensitive scenarios.
4. User Experience: The *ngIf approach creates brief form disappearance and reappearance, which may affect user experience and should be evaluated accordingly.

In practical development, selecting the most appropriate reset strategy based on specific requirements is recommended. For most cases, the built-in reset() method is sufficient, with more complex solutions reserved for special validation scenarios.

Conclusion

Angular 2's form reset mechanisms have evolved from manual operations to built-in methods. Early versions required developers to manually reset control values or reconstruct entire ControlGroups, while starting with RC.6, FormGroup provides a built-in reset() method that greatly simplifies this operation. For special requirements, more thorough form resets can be achieved by combining *ngIf directives or using the NgForm.resetForm() method. Understanding these different approaches and their applicable scenarios helps developers make appropriate technical choices in real projects, building more robust and user-friendly form interactions.