How to use onChange and onBlur at the same time per field

[desire]

I essentially want to have this behaviour pictured in the video where you validate onBlur and then the onChange validates and if its successful we clear the error

However because onChange and onBlur errors are handled seperately the error cannot be cleared until onBlur triggers again.

        <form.Field
                name="address_line_1"
                validators={{
                    onBlur: addressSchema.shape.address_line_1,
                    onChange: addressSchema.shape.address_line_1,
                }}
                children={({ state, handleChange, handleBlur }) => {
                    return (
                        <Input
                            label={t("labels.address-line-1")}
                            value={state.value}
                            onBlur={handleBlur}
                            onChange={(e) => handleChange(e.target.value)}
                            // onblur
                            error={state.meta.errors[0]?.message}
                        />
                    );
                }}
            />

[Pascalmh]

You could just validate onChange and use the blurred-state of the field to display the error.

Similar to the Example here: https://tanstack.com/form/latest/docs/framework/react/examples/simple

function FieldInfo({ field }: { field: AnyFieldApi }) {
  return (
    <>
      {field.state.meta.isTouched && !field.state.meta.isValid ? (
        <em>{field.state.meta.errors.join(',')}</em>
      ) : null}
      {field.state.meta.isValidating ? 'Validating...' : null}
    </>
  )
}

In your example it could look like this:

error={state.meta.isBlurred ? state.meta.errors[0]?.message : undefined}

What I like to do is add the submissionAttempts in there as well to reveal errors once the was a submission attempt

error={(state.submissionAttempts > 0 || state.meta.isBlurred) ? state.meta.errors[0]?.message : undefined}