Tag: Form reset with values

If this story makes the concept crystal clear for you, feel free to give it a like or share it with someone who loves clean code! 😊

---

I’m running a painting workshop. I’ve set up a table with blank canvases, paints, and brushes for everyone to create their masterpiece. At the start, I place a reference photo on each easel to guide them—let’s call this the initial state. Everyone starts painting with that photo in mind.

Now, suppose someone messes up their painting halfway through or decides they want to start over. I could just yell, “Reset!” and clear their canvas (that’s the form reset). But here’s the catch: I want their reference photo to stay on the easel—just like when we reset an Angular form and want the initial values to persist.

So what do I do? I’ve prepared in advance! Before anyone started painting, I saved a copy of each reference photo in a file folder nearby. When someone says, “Help, I want to reset!” I walk over, clear their canvas, and grab the reference photo from my folder to put it back on the easel. Now they can start again as if nothing ever happened.

In Angular, the “file folder” is the form’s setValue() method combined with the initial data we store at the beginning. After calling reset(), I use setValue() to bring back those initial values. This way, the workshop runs smoothly, and no one feels lost—just like how an Angular form keeps everything consistent and predictable.

End of the day? Everyone’s happy, and our workshop is a success. A clean reset with no missing pieces!

---

Initial Setup: Saving the “Reference Photo”

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-painting-workshop',
  templateUrl: './painting-workshop.component.html',
  styleUrls: ['./painting-workshop.component.css']
})
export class PaintingWorkshopComponent implements OnInit {
  paintingForm: FormGroup;
  initialValues: any;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    // Setting up the form with initial values (reference photo)
    this.paintingForm = this.fb.group({
      title: ['Sunset'],
      artist: ['Jane Doe'],
      year: [2024]
    });

    // Saving initial values for later use
    this.initialValues = this.paintingForm.value;
  }

  resetForm(): void {
    // Reset the form and reapply the initial values
    this.paintingForm.reset(this.initialValues);
  }
}

---

The Breakdown

1. Setting Up the Form:

• We use Angular’s FormBuilder to create a form (paintingForm) with initial values.
• These initial values represent our “reference photo.”

1. Saving the Initial State:

• We store the form’s initial values in a variable called initialValues.
• This acts like our “file folder” in the analogy, where we keep a copy of the reference photo.

1. Resetting the Form:

• The resetForm() method clears the form but uses reset(this.initialValues) to bring back the saved values.

---

Key JavaScript Concepts

• reset() Method:
• Clears the form but can accept an object to reinitialize values.
• Equivalent to clearing the canvas and putting the reference photo back.
• Keeping Initial Values:
• By saving the form’s original state, we avoid losing important data during resets.

---

Key Takeaways / Final Thoughts

1. Always Plan for Resets:

• When creating forms, anticipate the need for users to reset without losing context.

1. Use reset() Smartly:

• Combine it with pre-saved initial values to ensure smooth resets.

1. User-Friendly Design:

• Keeping initial values intact makes forms intuitive and prevents confusion.