hrender-examples/htmx-alpine-pt2/templates/fragments/todo-edit-form.html
2025-12-12 03:37:19 +01:00

32 lines
866 B
HTML

<form
id="todo-edit-form-{{.ID}}"
class="flex w-full gap-2 items-start"
hx-put="/todo/{{.ID}}"
hx-target="closest li"
hx-swap="outerHTML"
hx-target-error="this"
x-data="{
hasError: {{ if .Error }}true{{ else }}false{{ end }}
}"
@edit-cancelled="hasError = false"
>
<div class="flex-grow form-control space-y-1.5">
<input
type="text"
name="name"
class="input input-sm input-bordered w-full"
:class="{ 'input-error': hasError }"
x-model="form.name"
x-init="$el.focus()"
@input="hasError = false"
/>
{{ if .Error }}
<p class="text-error text-xs" x-show="hasError">{{ .Error }}</p>
{{ end }}
</div>
<button type="button" class="btn btn-sm btn-ghost" @click="cancelEdit()">
Cancelar
</button>
<button type="submit" class="btn btn-sm btn-primary">Guardar</button>
</form>