Cum lucrezi cu formularele în aplicațiile de tip…

Atunci când lucrez cu formulare în SPA, folosesc componente controlate sau necontrolate.

Componente controlate: Valoarea câmpului formularului este stocată în starea componentei și actualizată prin setState.

// Exemplu de component controlat în React
import React, { useState } from 'react';

function MyForm() {
  const [name, setName] = useState('');

  const handleChange = (event) => {
    setName(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Trimis:', name);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Nume:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      <button type="submit">Trimite</button>
    </form>
  );
}

Avantajele componentelor controlate:

Este mai ușor să controlezi și să validezi introducerea.
Este mai simplu să implementezi logică condițională pentru afișarea câmpurilor.
Este ușor să le integrezi cu biblioteci de gestionare a stării (Redux, Vuex).

Componente necontrolate: Valoarea câmpului formularului este stocată direct în elementul DOM, accesibil prin ref.

// Exemplu de component necontrolat în React
import React, { useRef } from 'react';

function MyUncontrolledForm() {
  const inputRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Trimis:', inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Nume:
        <input type="text" ref={inputRef} />
      </label>
      <button type="submit">Trimite</button>
    </form>
  );
}

Avantajele componentelor necontrolate:

Sunt mai simple pentru formulare simple fără logică complexă.
Necesită mai puțin cod pentru implementarea de bază.

Abordări generale pentru lucrul cu formularele în SPA:

Validare:
- Pe partea clientului (JavaScript) pentru feedback instant.
- Pe partea serverului pentru asigurarea integrității datelor.
- Utilizarea bibliotecilor de validare (Yup, Zod, VeeValidate, Vuelidate).
Gestionarea trimiterii:
- Prevenirea comportamentului implicit (event.preventDefault()).
- Trimiterea datelor către server (Fetch API, Axios, XHR).
- Afișarea stadiului de trimitere (în curs, succes, eroare).
Gestionarea stării:
- Utilizarea stării locale a componentului.
- Utilizarea managerilor de stare (Redux, Vuex, Pinia) pentru formulare complexe sau cele utilizate în alte părți ale aplicației.
Feedback pentru utilizator:
- Indicatori de încărcare.
- Mesaje de eroare de validare.
- Mesaje de succes/eroare la trimitere.
Accesibilitate (A11y):
- Utilizarea elementelor HTML semantice (<form>, <label>, <input>, <button>).
- Legarea <label> de câmpurile de intrare corespunzătoare (atributul for sau nesting).
- Utilizarea atributelor WAI-ARIA dacă este necesar.
Performanță:
- Debounce sau throttling pentru evenimentele onChange pe câmpurile cu modificări frecvente.
- Optimizarea randării la schimbarea stării formularului.
Testare:
- Teste unitare pentru logica și validarea formularului.
- Teste de integrare pentru interacțiunea formularului cu API-ul.

Alegerea între componente controlate și necontrolate depinde de complexitatea formularului și de cerințele de gestionare a stării și validare. Pentru majoritatea formularelor, în special cele complexe, componentele controlate oferă mai multă flexibilitate și control.

Cum lucrezi cu formularele în aplicațiile de tip single-page (SPA)?