diff --git a/src/uix/morfo/components/form.ts b/src/uix/morfo/components/form.ts index 205893820..b89d93a21 100644 --- a/src/uix/morfo/components/form.ts +++ b/src/uix/morfo/components/form.ts @@ -24,11 +24,11 @@ export const formMorfo = { defaultElement: 'form', optional: false, data: [ - { attr: 'data-pending', severity: 'optional' }, - { attr: 'data-dirty', severity: 'optional' }, - { attr: 'data-touched', severity: 'optional' }, - { attr: 'data-invalid', severity: 'optional' }, - { attr: 'data-submitted', severity: 'optional' } + { attr: 'data-pending', value: v.propRef('isPending'), severity: 'optional' }, + { attr: 'data-dirty', value: v.propRef('dirty'), severity: 'optional' }, + { attr: 'data-touched', value: v.propRef('touched'), severity: 'optional' }, + { attr: 'data-invalid', value: v.propRef('invalid'), severity: 'optional' }, + { attr: 'data-submitted', value: v.propRef('submitted'), severity: 'optional' } ], aria: [ { diff --git a/src/uix/soma/components/form/form-provider.svelte.ts b/src/uix/soma/components/form/form-provider.svelte.ts index a00491bca..c00148d94 100644 --- a/src/uix/soma/components/form/form-provider.svelte.ts +++ b/src/uix/soma/components/form/form-provider.svelte.ts @@ -45,12 +45,21 @@ export class FormProvider { private constructor(opts: FormProviderOpts) { this.opts = opts; this.soma = Soma.require(); - this.runtime = this.soma.runtime(formMorfo, {}); + this.runtime = this.soma.runtime(formMorfo, { + props: { + isPending: () => this.isPending, + dirty: () => this.isDirty, + touched: () => this.isTouched, + invalid: () => this.isInvalid && this.isSubmitted, + submitted: () => this.isSubmitted + } + }); this.runtimePart = this.runtime.part('provider', { id: opts.id, ref: opts.ref, owner: this, - context: FormProvider.ctx + context: FormProvider.ctx, + syncAttrs: true }); } @@ -119,12 +128,6 @@ export class FormProvider { this.runtimePart.assert({ ...this.runtimePart.props, novalidate: this.opts.noValidate.current || undefined, - 'aria-busy': boolToStr(this.isPending), - 'data-pending': boolToEmptyStrOrUndef(this.isPending), - 'data-dirty': boolToEmptyStrOrUndef(this.isDirty), - 'data-touched': boolToEmptyStrOrUndef(this.isTouched), - 'data-invalid': boolToEmptyStrOrUndef(this.isInvalid && this.isSubmitted), - 'data-submitted': boolToEmptyStrOrUndef(this.isSubmitted), onsubmit: this.handleSubmit } as const) );