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

[carere]

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 ?

[fabian-hiller]

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

[ael-imra]

@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

[fabian-hiller]

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.

[ael-imra]

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

[fabian-hiller]

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

[ael-imra]

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

[fabian-hiller]

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.