Form Resetting in Angular

Form resetting in Angular allows you to clear or reset the form's state, either to its initial values or to specified values. This tutorial covers the basics of resetting forms effectively in your Angular applications.

Why Reset Forms?

Resetting forms is useful in scenarios where you want to clear user inputs, reinitialize the form to its default state, or provide a way for users to start over without refreshing the page.

Setting Up Form Resetting

To reset a form, you need to set up a reactive form and define a method to reset the form controls:

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ReactiveFormsModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// app.component.ts
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  userForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.userForm = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      password: ['', Validators.required]
    });
  }

  resetForm() {
    this.userForm.reset();
  }

  resetFormWithValues() {
    this.userForm.reset({
      name: 'John Doe',
      email: 'john.doe@example.com',
      password: ''
    });
  }

  onSubmit() {
    if (this.userForm.valid) {
      console.log('Form submitted!', this.userForm.value);
      // Handle form submission logic here
    } else {
      console.log('Form is invalid');
    }
  }
}

// app.component.html

  

    Name
    
    

      
Name is required
    
  
  

    Email
    
    

      
Email is required
      
Invalid email format
    
  
  

    Password
    
    

      
Password is required
    
  
  Submit
  Reset
  Reset with Values

Key Points

Conclusion

Resetting forms in Angular is a useful feature that allows you to clear or reinitialize the form's state. By understanding and using form resetting effectively, you can create flexible and user-friendly forms in your Angular applications. Happy coding!