Siapa owner nilai field?
Siapa owner status dirty/touched/error?
Siapa yang boleh menjalankan validation?
Siapa yang boleh submit?
Apakah server response menjadi source of truth baru?
Apakah form boleh menyimpan data yang juga ada di cache server?
Bagaimana field saling bergantung tanpa membuat cycle?
Bagaimana invalid state dicegah, bukan hanya ditampilkan?

const form = {
  name: 'Ana',
  email: 'ana@example.com',
  role: 'admin',
};

User -> Field               : input/change/blur/focus
Field -> Form               : value commit, touch, validation signal
Form -> Field               : error, disabled, default value, reset
Form -> Server              : submit command
Server -> Form              : success/error/conflict
Form -> Page                : submitted, cancelled, dirty change
Page -> Form                : initial data, permission, mode

Payload value boleh berada di form.
Server entity canonical seharusnya tetap di server cache/read model.
Validation boleh derived, kecuali server error perlu dipertahankan sampai field relevan berubah.
Dirty/touched adalah UI interaction metadata, bukan domain data.
Submit status adalah command lifecycle, bukan field value.

export type TextFieldProps = {
  name: string;
  value: string;
  onValueChange: (nextValue: string) => void;
  onBlur?: () => void;
  error?: string;
  disabled?: boolean;
  required?: boolean;
};

value          = read model
onValueChange  = intent/event port
onBlur         = meta event
disabled       = command gate
error          = validation read model

// Kurang baik: field tahu terlalu banyak tentang form library atau store.
<TextField form={form} path="customer.email" />

<TextField
  name="email"
  value={email.value}
  onValueChange={email.setValue}
  onBlur={email.markTouched}
  error={email.error}
/>

function ControlledEmail() {
  const [email, setEmail] = useState('');

  return (
    <input
      value={email}
      onChange={(event) => setEmail(event.target.value)}
    />
  );
}

function UncontrolledEmail() {
  const ref = useRef<HTMLInputElement>(null);

  function submit() {
    const email = ref.current?.value ?? '';
    // submit email
  }

  return <input ref={ref} defaultValue="" />;
}

Controlled cocok ketika UI lain harus re-render berdasarkan value field saat itu juga.
Uncontrolled cocok ketika value hanya dibaca pada submit/blur atau form engine punya subscription granular.

// Buruk: controlled semua field di page besar tanpa alasan.
const [form, setForm] = useState(hugeObject);

<input
  value={form.firstName}
  onChange={(e) => setForm({ ...form, firstName: e.target.value })}
/>

Setiap keypress membuat owner form re-render.
Semua child yang tergantung object form berisiko ikut re-render.
Validasi dan derivasi sering ikut berjalan terlalu sering.
Field meta tercampur dengan payload.

setForm((current) => ({
  ...current,
  firstName: e.target.value,
}));

Split field state.
Gunakan reducer untuk transition kompleks.
Gunakan field-level subscription jika field banyak.
Jangan expose entire form object ke semua child.
Pisahkan payload, meta, dan validation state.

type FormAggregate = {
  values: Record<string, unknown>;
  errors: Record<string, string[]>;
  touched: Record<string, boolean>;
  dirty: Record<string, boolean>;
  submitStatus: 'idle' | 'submitting' | 'success' | 'failed';
};

const [form, setForm] = useState<FormState>(initialFormState);

Form kecil.
Field sedikit.
Validasi ringan.
Komunikasi sederhana.

Form besar.
Field dinamis.
Field-level subscription.
High-frequency input.
Wizard kompleks.

type FormEvent =
  | { type: 'FIELD_CHANGED'; name: string; value: unknown }
  | { type: 'FIELD_BLURRED'; name: string }
  | { type: 'VALIDATION_FAILED'; errors: Record<string, string[]> }
  | { type: 'SUBMIT_STARTED' }
  | { type: 'SUBMIT_SUCCEEDED' }
  | { type: 'SUBMIT_FAILED'; errors: Record<string, string[]> };

Submit hanya boleh jika valid.
Server error field harus hilang saat field terkait berubah.
Changing country harus reset province.
Changing role harus reset permission set.
Submit failed harus mempertahankan draft.
Submit success harus commit dan reset dirty state.

Banyak field.
Dynamic schema.
Form builder.
Subscription granular.
Nested fields.
Virtualized fields.
Complex validation graph.

type Values = {
  email: string;
  password: string;
};

type FormState = {
  values: Values;
  touched: Partial<Record<keyof Values, boolean>>;
  errors: Partial<Record<keyof Values, string>>;
  status: 'idle' | 'submitting' | 'success' | 'failed';
};

type FormEvent =
  | { type: 'FIELD_CHANGED'; field: keyof Values; value: string }
  | { type: 'FIELD_BLURRED'; field: keyof Values }
  | { type: 'SUBMIT_STARTED' }
  | { type: 'SUBMIT_FAILED'; errors: Partial<Record<keyof Values, string>> }
  | { type: 'SUBMIT_SUCCEEDED' }
  | { type: 'RESET'; values: Values };

function validate(values: Values) {
  const errors: Partial<Record<keyof Values, string>> = {};

  if (!values.email.includes('@')) {
    errors.email = 'Email must be valid.';
  }

  if (values.password.length < 8) {
    errors.password = 'Password must contain at least 8 characters.';
  }

  return errors;
}

function reducer(state: FormState, event: FormEvent): FormState {
  switch (event.type) {
    case 'FIELD_CHANGED': {
      const values = {
        ...state.values,
        [event.field]: event.value,
      };

      const nextErrors = { ...state.errors };
      delete nextErrors[event.field];

      return {
        ...state,
        values,
        errors: nextErrors,
        status: state.status === 'failed' ? 'idle' : state.status,
      };
    }

    case 'FIELD_BLURRED': {
      const errors = validate(state.values);

      return {
        ...state,
        touched: {
          ...state.touched,
          [event.field]: true,
        },
        errors,
      };
    }

    case 'SUBMIT_STARTED': {
      const errors = validate(state.values);

      if (Object.keys(errors).length > 0) {
        return {
          ...state,
          errors,
          touched: {
            email: true,
            password: true,
          },
          status: 'failed',
        };
      }

      return {
        ...state,
        errors: {},
        status: 'submitting',
      };
    }

    case 'SUBMIT_FAILED':
      return {
        ...state,
        errors: event.errors,
        status: 'failed',
      };

    case 'SUBMIT_SUCCEEDED':
      return {
        ...state,
        errors: {},
        touched: {},
        status: 'success',
      };

    case 'RESET':
      return {
        values: event.values,
        touched: {},
        errors: {},
        status: 'idle',
      };
  }
}

function useLoginForm(initialValues: Values) {
  const [state, dispatch] = useReducer(reducer, {
    values: initialValues,
    touched: {},
    errors: {},
    status: 'idle',
  });

  function field(name: keyof Values) {
    return {
      name,
      value: state.values[name],
      error: state.touched[name] ? state.errors[name] : undefined,
      onChange: (event: React.ChangeEvent<HTMLInputElement>) => {
        dispatch({
          type: 'FIELD_CHANGED',
          field: name,
          value: event.target.value,
        });
      },
      onBlur: () => {
        dispatch({ type: 'FIELD_BLURRED', field: name });
      },
    };
  }

  return {
    state,
    field,
    dispatch,
  };
}

function LoginForm() {
  const form = useLoginForm({ email: '', password: '' });

  async function submit(event: React.FormEvent) {
    event.preventDefault();

    form.dispatch({ type: 'SUBMIT_STARTED' });

    if (form.state.status === 'failed') {
      return;
    }

    try {
      await login(form.state.values);
      form.dispatch({ type: 'SUBMIT_SUCCEEDED' });
    } catch (error) {
      form.dispatch({
        type: 'SUBMIT_FAILED',
        errors: normalizeServerErrors(error),
      });
    }
  }

  return (
    <form onSubmit={submit} noValidate>
      <TextField label="Email" {...form.field('email')} />
      <TextField label="Password" type="password" {...form.field('password')} />

      <button disabled={form.state.status === 'submitting'}>
        Sign in
      </button>
    </form>
  );
}

async function submit(event: React.FormEvent) {
  event.preventDefault();

  const errors = validate(form.state.values);

  if (Object.keys(errors).length > 0) {
    form.dispatch({ type: 'SUBMIT_FAILED', errors });
    return;
  }

  form.dispatch({ type: 'SUBMIT_STARTED' });

  try {
    await login(form.state.values);
    form.dispatch({ type: 'SUBMIT_SUCCEEDED' });
  } catch (error) {
    form.dispatch({
      type: 'SUBMIT_FAILED',
      errors: normalizeServerErrors(error),
    });
  }
}

Raw input       : "  Rp 10.000 "
Normalize       : "10000"
Parse           : 10000
Field validate  : amount > 0
Cross-field     : amount <= availableBudget
Server validate : budget still available, user has permission
Error mapping   : field error or form-level error

country -> province options
startDate -> endDate min
role -> permission set
caseType -> required fields
paymentMethod -> bank/account fields

useEffect(() => {
  if (country === 'ID') {
    setProvince('DKI Jakarta');
  }
}, [country]);

type FormEvent =
  | { type: 'COUNTRY_CHANGED'; country: string }
  | { type: 'PROVINCE_CHANGED'; province: string };

function reducer(state: State, event: FormEvent): State {
  switch (event.type) {
    case 'COUNTRY_CHANGED': {
      return {
        ...state,
        values: {
          ...state.values,
          country: event.country,
          province: '',
        },
        errors: removeProvinceError(state.errors),
      };
    }

    case 'PROVINCE_CHANGED': {
      return {
        ...state,
        values: {
          ...state.values,
          province: event.province,
        },
      };
    }
  }
}

field saling mengawasi lewat effect

form owner menjalankan transition yang menjaga invariant

<FormField name="email">
  <FormLabel>Email</FormLabel>
  <FormControl>
    <Input />
  </FormControl>
  <FormDescription>Use your work email.</FormDescription>
  <FormError />
</FormField>

field id
name
error id
is invalid
is required
is disabled
aria-describedby

type FieldContextValue = {
  name: string;
  inputId: string;
  descriptionId: string;
  errorId: string;
  invalid: boolean;
};

const FieldContext = createContext<FieldContextValue | null>(null);

function useFieldContext() {
  const value = useContext(FieldContext);

  if (!value) {
    throw new Error('Field components must be used inside <FormField>.');
  }

  return value;
}

function FormField({ name, invalid, children }: FormFieldProps) {
  const reactId = useId();

  const value = useMemo(
    () => ({
      name,
      inputId: `${reactId}-input`,
      descriptionId: `${reactId}-description`,
      errorId: `${reactId}-error`,
      invalid,
    }),
    [name, reactId, invalid],
  );

  return (
    <FieldContext.Provider value={value}>
      <div data-field={name}>{children}</div>
    </FieldContext.Provider>
  );
}

function FormInput(props: React.ComponentProps<'input'>) {
  const field = useFieldContext();

  return (
    <input
      {...props}
      id={field.inputId}
      name={field.name}
      aria-invalid={field.invalid || undefined}
      aria-describedby={
        field.invalid
          ? `${field.descriptionId} ${field.errorId}`
          : field.descriptionId
      }
    />
  );
}

const [isSubmitting, setSubmitting] = useState(false);
const [error, setError] = useState<string | null>(null);

isSubmitting=true, error="failed"
isSubmitting=false, success=true, error="failed"
isSubmitting=true, dirty=false, disabled=false

type SubmitState =
  | { status: 'idle' }
  | { status: 'invalid'; errors: FieldErrors }
  | { status: 'submitting'; requestId: string }
  | { status: 'serverRejected'; errors: FieldErrors }
  | { status: 'networkFailed'; message: string }
  | { status: 'success'; resultId: string };

async function submitProfile(
  previousState: ProfileActionState,
  formData: FormData,
): Promise<ProfileActionState> {
  const payload = parseProfileFormData(formData);
  const result = await updateProfile(payload);

  if (!result.ok) {
    return {
      status: 'failed',
      errors: result.errors,
    };
  }

  return {
    status: 'success',
    profileId: result.profileId,
  };
}

function ProfileForm() {
  const [state, action] = useActionState(submitProfile, {
    status: 'idle',
    errors: {},
  });

  return (
    <form action={action}>
      <input name="displayName" />
      {state.errors.displayName ? (
        <p role="alert">{state.errors.displayName}</p>
      ) : null}
      <SubmitButton />
    </form>
  );
}

function SubmitButton() {
  const status = useFormStatus();

  return (
    <button disabled={status.pending}>
      {status.pending ? 'Saving...' : 'Save'}
    </button>
  );
}

FormData adalah command payload.
Action adalah command handler.
useActionState adalah result state.
useFormStatus adalah descendant read model untuk pending submit.

Untuk dynamic client-side validation kompleks, masih butuh form controller.
Untuk field-level subscription besar, gunakan form engine/subscription.
Untuk server cache invalidation, action success harus terhubung ke cache/router boundary.

{
  "fieldErrors": {
    "email": ["Email is already registered"]
  },
  "formErrors": ["Cannot create user in this workspace"]
}

Kapan error hilang?
Saat field berubah?
Saat blur?
Saat submit ulang?
Saat server menerima payload baru?

case 'FIELD_CHANGED': {
  return {
    ...state,
    values: updateValue(state.values, event.field, event.value),
    serverErrors: removeErrorForField(state.serverErrors, event.field),
  };
}

Email already registered  -> hilang saat email berubah.
Workspace locked          -> tidak hilang hanya karena email berubah.
Network timeout           -> hilang saat retry dimulai.
Permission denied         -> biasanya tidak hilang dari edit field.
Conflict version mismatch -> butuh reload/merge workflow.

schema berasal dari server,
field bergantung pada pilihan user,
field array bisa bertambah/berkurang,
wizard punya step dinamis,
role/permission mengubah field visibility,
regulatory workflow punya conditional requirement.

Field bisa mount/unmount.
Value field tersembunyi bisa masih tersimpan.
Validation schema berubah.
Error stale bisa tertinggal.
Submit payload bisa mengandung field yang sudah tidak relevan.
Focus order berubah.

type FieldRegistration = {
  name: string;
  validate?: (value: unknown, values: Values) => string | null;
  serialize?: (value: unknown) => unknown;
};

function useFieldRegistration(registration: FieldRegistration) {
  const form = useFormRegistry();

  useEffect(() => {
    return form.register(registration);
  }, [form, registration.name]);
}

const registration = useMemo(
  () => ({ name, validate }),
  [name, validate],
);

useFieldRegistration(registration);

Wizard root memiliki seluruh draft.
Step menerima slice state dan command.
Navigasi step menjaga invariant.

Short wizard.
Cross-step validation.
Review page.
Draft save.

Step punya local draft.
Saat next, step commit ke wizard aggregate.
Back bisa rehydrate dari aggregate.

Step berat.
Step punya local async lookup.
Step bisa dibuka independen.
Performance isolation.

Step punya local state.
Wizard juga punya state yang sync lewat useEffect.
Server cache juga di-update sebelum submit.

Satu state object besar.
Provider context value berubah setiap keypress.
Semua field membaca entire form state.
Validation berjalan di render.
Derived error object dibuat ulang terus.
Callback per-field tidak stabil.
Async validation tanpa debounce/cancellation.

1. Ukur dahulu.
2. Split form menjadi section.
3. Hindari passing entire form object.
4. Field subscribe hanya ke value/error/meta sendiri.
5. Memoize adapter jika perlu.
6. Debounce expensive validation.
7. Pindahkan heavy validation ke event/worker jika perlu.
8. Gunakan uncontrolled/subscription model untuk field sangat banyak.

Input email berubah tidak seharusnya membuat field address, role, dan notes re-render kecuali mereka benar-benar bergantung pada email.

<label htmlFor="email">Email</label>
<input
  id="email"
  name="email"
  aria-invalid={error ? true : undefined}
  aria-describedby={error ? 'email-error' : undefined}
/>
{error ? (
  <p id="email-error" role="alert">
    {error}
  </p>
) : null}

function ErrorSummary({ errors }: { errors: FieldError[] }) {
  if (errors.length === 0) return null;

  return (
    <section role="alert" aria-labelledby="error-summary-title">
      <h2 id="error-summary-title">Please fix the following fields</h2>
      <ul>
        {errors.map((error) => (
          <li key={error.field}>
            <a href={`#${error.field}`}>{error.message}</a>
          </li>
        ))}
      </ul>
    </section>
  );
}

Visual user       : red border, text error
Keyboard user     : focus order, summary links
Screen reader     : label, describedby, invalid state, alert
Motor impairment  : no timing traps, clear retry, disabled semantics

Form became dirty.
Form submitted successfully.
Form cancelled.
Form failed because entity conflict.
Form needs navigation block.

<CaseEditForm
  caseId={caseId}
  initialValues={initialValues}
  onDirtyChange={setHasUnsavedChanges}
  onSubmitted={(result) => navigate(`/cases/${result.caseId}`)}
  onConflict={(conflict) => openConflictDialog(conflict)}
/>

onDirtyChange dipanggil kapan?
onSubmitted dipanggil setelah server/cache update atau sebelum?
onConflict apakah form tetap editable?
onCancel apakah parent boleh block close?

Input menampilkan value A, submit mengirim value B.
Reset tidak konsisten.
Parent dan child saling sync lewat effect.

Value field dimiliki oleh dua tempat.

Pilih satu owner.
Gunakan controlled contract atau commit contract.
Hapus sync effect yang tidak perlu.

User memperbaiki field, error lama tetap muncul.

Map server error ke field terkait.
Hapus error field saat field berubah.
Pertahankan form-level error sesuai domain policy.

User mengetik satu karakter, error hilang padahal value masih invalid.

Bedakan server error dan client validation error.
Revalidate field saat change/blur sesuai UX policy.

Dua request terkirim.
Record duplicate.
Button disabled terlambat.

Submit state sebagai command lifecycle.
Disable command saat pending.
Gunakan idempotency key untuk server command penting.

Username lama dianggap valid setelah user mengetik username baru.

Gunakan AbortController/request id.
Ignore response yang bukan request terbaru.

const requestIdRef = useRef(0);

async function validateUsername(username: string) {
  const requestId = ++requestIdRef.current;
  const result = await checkUsername(username);

  if (requestId !== requestIdRef.current) {
    return;
  }

  setUsernameStatus(result);
}

User memilih payment method cash, tetapi payload masih berisi bankAccount.

Tentukan policy hidden field.
Serialize payload berdasarkan active schema, bukan seluruh draft mentah.

[ ] Field value punya satu owner.
[ ] Payload state dipisah dari field meta.
[ ] Server entity tidak diduplikasi sebagai draft tanpa reset/commit policy.
[ ] Validation pipeline jelas.
[ ] Server error lifetime jelas.
[ ] Submit lifecycle bukan cuma boolean jika ada banyak state.
[ ] Double submit dicegah di UI dan server.
[ ] Async validation punya race handling.
[ ] Hidden/dynamic field punya serialization policy.
[ ] Form accessibility diuji dengan keyboard dan screen reader assumptions.
[ ] Page callback contract jelas.
[ ] Dirty/navigation guard tidak membaca detail field tanpa perlu.
[ ] Performance diukur untuk form besar.

caseType menentukan field wajib.
assignee lookup async.
priority mengubah SLA date default.
submit bisa gagal karena server validation.
form harus menampilkan error summary.
user tidak boleh meninggalkan halaman saat dirty.

Form root sebagai orchestrator.
Field components sebagai UI primitives.
Validation sebagai pipeline terpisah.
Server submit sebagai command lifecycle.
Dirty state sebagai aggregate signal ke page.

Form adalah graph, bukan object.
Field tidak boleh tahu terlalu banyak tentang form engine.
Payload, meta, validation, dan submit lifecycle adalah state berbeda.
Cross-field behavior sebaiknya transition eksplisit, bukan effect saling mengawasi.
Server errors butuh lifetime policy.
Dynamic fields butuh registry/serialization policy.
Accessibility adalah bagian dari communication contract.

Owner-nya siapa?
Edge komunikasinya apa?
State ini canonical, draft, derived, meta, atau command lifecycle?
Invariant apa yang sedang dilanggar?