Components

HiddenInput

Input nascosto per trasportare valori nel form senza alcuna interfaccia visiva.

Panoramica

HiddenInput è un componente custom che renderizza un semplice <input type="hidden">. Non ha interfaccia grafica: serve a includere valori nel form (ID di record, token, chiavi di contesto) senza esporli all'utente. È particolarmente utile in DynamicFormLayouts per passare identificatori derivati dal contesto applicativo (es. parentId, idUtente, idTenant).

Utilizzo nello schema

const schema = [
  {
    name: 'parentId',
    type: 'hidden',
    defaultValue: parentRecord.id,
  },
  {
    name: 'idAnagrafica',
    type: 'hidden',
    defaultValue: route.params.id,
  },
]

Utilizzo diretto

<script setup lang="ts">
import { ref } from 'vue'

const parentId = ref(42)
</script>

<template>
  <!-- Nessun output visivo — il valore è incluso nel submit del form -->
  <HiddenInput
    v-model="parentId"
    name="parentId"
  />
</template>

Props

PropTipoDefaultDescrizione
modelValueunknownundefinedValore da includere nel form (v-model)
namestringNome del campo nel form HTML (attributo name)

Note importanti

  • Non espone props label, helperText, error o disabled perché il campo è completamente invisibile.
  • Il valore viene convertito a stringa tramite String(modelValue ?? '') prima di essere assegnato all'attributo value dell'input HTML.
  • In DynamicFormLayouts, la prop name corrisponde alla chiave name del field nella schema definition; non è necessario specificarla esplicitamente se si usa lo schema.
  • Non applicare regole di validazione visive su campi hidden: la validazione di tali valori va eseguita server-side o tramite guardie lato applicazione prima del submit.