Een client-side formulierbeheerder die rekening houdt met de status van statische HTML-formulieren. Houdt de status van elk veld bij (nieuw, ongewijzigd, gewijzigd, ongeldig, leeg) en schakelt de acties in de werkbalk dienovereenkomstig in of uit.

@hradigital/smartforms

Een state-aware client-side formulierbeheerder voor statische HTML-formulieren. Het voegt reactief gedrag toe aan de HTML die een server-rendered applicatie al produceert, volledig aangestuurd door attributen - markeer een <form> met de klasse smartform en het neemt het over. Velden, toolbarknoppen en HTTP-acties volgen vervolgens de state van het formulier, zonder React of Vue en zonder de markup die de server al verzendt te herschrijven.

• Per-veldstatus - houdt new , unchanged , changed , invalid en empty bij en past een overeenkomende CSS-klasse toe voor de styling.
• Twee lay-outs - een lijst met records ( smartformlist ) of een enkel record ( smartformrecord ).
• Werkbalkconfiguratie - hiermee kunt u de knoppen voor aanmaken, bijwerken, verwijderen en annuleren in- en uitschakelen in de algemene status van het formulier.
• HTTP-taken - koppelt een actie in de werkbalk aan een werkwoord en eindpunt, zoals gedeclareerd in de markup.
• formStateChange gebeurtenissen - een CustomEvent per toestandsovergang, voor alles wat de bibliotheek niet dekt.
• Geen framework, geen build-stap - ESM, CJS en een UMD-build die direct vanuit een <script> tag geladen kan worden.

Installatie

npm install @hradigital/smartforms
# or
yarn add @hradigital/smartforms
# or
pnpm add @hradigital/smartforms

Of laad de UMD-build direct in de browser:

<script src="https://unpkg.com/@hradigital/smartforms/dist/smartforms.umd.js"></script>
<script>
    SmartForms.autoInit();
</script>