modular-forms icon indicating copy to clipboard operation
modular-forms copied to clipboard

Is there a way to have a signal in order to know if the Form is valid or not ?

Open carere opened this issue 1 year ago • 7 comments

Hello, thx for this nice lib :)

I wonder if there is a way to get a signal which returns a boolean and is updated when the form is valid or not ?

carere avatar Sep 08 '24 15:09 carere

We have the .invalid signal property of the form store: https://modularforms.dev/solid/api/FormStore

fabian-hiller avatar Sep 08 '24 18:09 fabian-hiller

@fabian-hiller is there a possible way to change default value of .invalid to be true at first ? cause it doesn't change until the form get submitted

ael-imra avatar Oct 29 '24 17:10 ael-imra

The idea then was to call it invalid instead of valid and only set it to true when we know for sure that the form is invalid. What is your use case? Often it is possible to combine dirty, submitted and invalid to achieve a certain goal.

fabian-hiller avatar Oct 30 '24 02:10 fabian-hiller

I trying to make submit button disabled until the form is valid, here's my button component

export const FormButton: FormButtonT = (props) => {
	const [form, elemntProps] = splitProps(props, ['of'])
	return <Button {...elemntProps} disabled={form.of.invalid || !form.of.dirty} loading={form.of.submitting || elemntProps.loading} />
}

I tried to use dirty but after first input changed the button get enabled. Example in stackblitz

ael-imra avatar Oct 30 '24 11:10 ael-imra

Try to set validateOn to 'input' or 'change' in your form options when calling createForm or createFormStore. https://modularforms.dev/solid/api/FormOptions

fabian-hiller avatar Oct 30 '24 14:10 fabian-hiller

Already did, when start typing invalid return true but after finish changing input with a valid value the invalid return false again.

ael-imra avatar Oct 30 '24 15:10 ael-imra

True. Sorry for my last comment. It seems like the only way to do this at the moment is to call validate(...) initially, use form.invalid to disable the submit button and only show the error messages of an individual field if it has been touched or is dirty.

fabian-hiller avatar Oct 31 '24 02:10 fabian-hiller