Tag: touched state in forms

If you find this story helpful, feel free to give it a like or share—it means a lot!

---

Think of form states as a set of fresh, blank canvas paintings in an art studio. Imagine I’ve just laid out a pristine white canvas on an easel. It’s untouched, clean, and waiting for something to happen. That’s the pristine state in a form—it’s like the canvas hasn’t been worked on yet, and no one has even thought about putting a brush to it.

Now, let’s say I pick up a paintbrush and dab it in some paint, maybe just to test the color. The canvas isn’t pristine anymore, even if I haven’t committed to creating a masterpiece. It’s been touched. Similarly, a form becomes touched as soon as I interact with one of its fields, even if I don’t change anything.

Finally, let’s say I make a bold stroke of red paint across the canvas—it’s no longer just touched; it’s actively dirty. That’s the moment when a form field has been altered. Maybe I typed something into an input or changed a dropdown value. The canvas now has a mark, and the form is dirty because it’s different from the original state.

What’s cool is that these states can coexist across my forms like an art studio full of evolving canvases. One might be pristine, another touched but still blank, and another completely dirty. It’s all about how much effort has gone into shaping them.

---

In JavaScript, managing form states is like monitoring those canvases in real time. Frameworks often help track pristine, touched, and dirty states. Here’s how this looks in code:

Example: Angular Form States

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

@Component({
  selector: 'app-canvas-form',
  template: `
    <form [formGroup]="form">
      <input formControlName="canvasField" placeholder="Add a stroke to the canvas">
    </form>
    <p>Pristine: {{ form.get('canvasField')?.pristine }}</p>
    <p>Touched: {{ form.get('canvasField')?.touched }}</p>
    <p>Dirty: {{ form.get('canvasField')?.dirty }}</p>
  `,
})
export class CanvasFormComponent {
  form = new FormGroup({
    canvasField: new FormControl(''),
  });
}

What Happens Here?

1. Pristine: When the form is initialized, pristine is true because no changes have been made.
2. Touched: As soon as I click on the input field and then click away, touched becomes true. I’ve interacted, just like picking up a brush.
3. Dirty: If I type anything in the input, dirty becomes true. I’ve left a mark, changing the value from its original state.

---

Example: React with Controlled Components

In React, we manage state with hooks like useState to track input changes. Here’s an example:

import React, { useState } from 'react';

const CanvasForm = () => {
  const [value, setValue] = useState('');
  const [touched, setTouched] = useState(false);
  const [pristine, setPristine] = useState(true);

  const handleChange = (e) => {
    setValue(e.target.value);
    setPristine(false); // No longer pristine once something changes
  };

  const handleBlur = () => {
    setTouched(true); // Mark as touched when the input loses focus
  };

  const dirty = value !== ''; // Dirty if value is not the initial state

  return (
    <div>
      <input
        value={value}
        onChange={handleChange}
        onBlur={handleBlur}
        placeholder="Add a stroke to the canvas"
      />
      <p>Pristine: {pristine ? 'Yes' : 'No'}</p>
      <p>Touched: {touched ? 'Yes' : 'No'}</p>
      <p>Dirty: {dirty ? 'Yes' : 'No'}</p>
    </div>
  );
};

export default CanvasForm;

What Happens Here?

1. Pristine: As long as pristine is true, it means the input hasn’t been modified.
2. Touched: The onBlur handler updates touched when I click outside the input.
3. Dirty: If the value changes from its original state (empty), it’s considered dirty.

---

Key Takeaways

1. Pristine: A form or field starts in a pristine state until any interaction occurs.
2. Touched: The field becomes touched once I interact with it, even if I don’t change the value.
3. Dirty: If the value changes from its initial state, the field is dirty.

Using frameworks like Angular or React simplifies tracking these states, making it easier to validate forms and provide user feedback. These concepts are essential for creating user-friendly and interactive applications.