#Developing highly complex forms especially with conditional validation cross state machines

1 messages · Page 1 of 1 (latest)

upper parcel
#

First of all, thank you so much for taking the time in reading and spending your limited resources to take on my request for help. It is highly appreciated.

I'm looking for best practices / resources / examples and/or being pointed in the right direction in using XState for highly complex forms.
Especially need to have conditional validation happening across state machines.

I will post further detail in the messages below

#

@novel zenith

rough badger
#

you can digging into aws amplify-ui code
https://github.com/aws-amplify/amplify-ui/tree/main/packages/ui/src/machines
they use xstate for the authentication logic + UI in the react app

so all the login forms and all the related things are driven by xstate

GitHub
amplify-ui/packages/ui/src/machines at main · aws-amplify/amplify-ui

Amplify UI is a collection of accessible, themeable, performant React (and more!) components that can connect directly to the cloud. - amplify-ui/packages/ui/src/machines at main · aws-amplify/ampl...

novel zenith
upper parcel
#

Hey, I am trying to make abstract form machines that spawn actors (inputs) and then these inputs sync their context with the form.
The machines have a more generic approach so all other machines for the forms would have a consistent behaviour.
The configuration of the actors and the form inputs would be carried from the form to its actors, and the form itself contain its own validation to determine when it is valid.
It is important for the machines to be able to communicate between each other, they'd follow a hierarchical order so that form 1 would upon submission allow for form 2 and so on.
Some forms need to intercommunicate so to avoid having a lot of coupling we thought of potentially having like a "bus" like in event driven architecture, and then a topic that each form/input might subscribe / publish to.
Some specific field validations requires to know other fields values too, this is proving to be quite complicated 😦

I hope you could give a hand. if its not very comprehensible tell me and i can elaborate better

upper parcel
#

Thanks so much guys

upper parcel
rough badger
upper parcel
#

thanks mate

#

all in all I am trying to find a way to make form machines that spawn inputs as their actors and then the actors sync their context up

rough badger
#

or you can hire @novel zenith and let him write the code 😂

upper parcel
#

i genuinely would

#

if thats an option tell me

#

i am loving state machines but some concepts and mechanics are extremely complex to get

rough badger
#

true

upper parcel
#

the api is really big so you can do everythign in a million different ways. i like that, but also means that there is a higher learning curve

#

i went through all the content on frontend masters by david

#

its fantastic, but when trying to use his teaching to solve what im trying to do it gets really difficult then

rough badger
#

david has an awesome stuff on frontendmasters but you need to play , and write code to really understand

upper parcel
#

true

rough badger
#

this is what i do, looking for projects to build and learn in the process

upper parcel
#

i think the difficult for me arises when i need to make machines communicate between each other adequately

rough badger
#

the best advice that i can give you is split your project to smallest pieces, and start combining them slowly

upper parcel
#

true

#

on that note

#

its really hard to grasp the aws amplify machines because they are so massive, and have such a specific domain

rough badger
#

david always says start from your events just start writing them

upper parcel
#

any chance you know of any great example in the wild on inter form communication and cross field validations?

#

sorry to be hitting on the same key again

#

im really out of options here almost 😐

rough badger
#

trying to remember if i saw something like that...

late lotus
#

any frontend framework limitations?

#

If you want to get your hands dirty, you can use zod .refine for at least cross field validation

rough badger
#

I think in his case zod need to come later in the process.

#

you need to know how its all connect before you validate, but it's just me 😬

late lotus
#

I would be all ears if you have an example for form validation 😄

#

especially with reactivity

#

I was just thinking that would switch back and forth between editing and validating

rough badger
#

but are great to start from

late lotus
#

okay, that captures all states of a single field?

rough badger
#

sorry, i didn't understand what you mean

late lotus
#

in the catalogue the form input

rough badger
#

yea

#

blur, focus , validation ...

late lotus
#

hmm what if you have a form validation framework already that does the heavy lifting and you just want to fill in gaps like cross field validation or such?

rough badger
#

also he have a vid on youtube on how to connect with react-hook-form

late lotus
#

does it have to be an all or nothing thing?

rough badger
#

i don't think so

late lotus
#

I still cannot bring together state machines and reactivity

rough badger
#

can you put an example on the stately editor ?

late lotus
#

got the main issue there already 😄

rough badger
#

😂

#

do you have a like ?

upper parcel
late lotus
#

so lets say, I have a form and it it can be either create/update or readonly

#

if it is create I just fill in some dropdowns and so on, but if update or readonly I have already data that needs to be filled into the form

#

so I would have to get that data first

#

so what I would do would be calling some useQuery composable that returns a reactive result variable like const { result, error } = useQuery(...)

#

how would I throw that into any state of the machine? it cannot be an action because that is FF so it would have to be an invoke

#

but since it is reactive it is not a callback, nor promise, maybe closest to observable but living in a proxy

upper parcel
#

i have been looking into a way to use jotai as a way to create atoms as a way to "sync" state instead of using actors too. thoughts? recommendations?

rough badger
upper parcel
#

thanks :))

rough badger
#

if you have or want to write some demo code, i can take a look

upper parcel
late lotus
# 

import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'

export default {
  setup () {
    const { result } = useQuery(gql`
      query getUsers {
        users {
          id
          firstname
          lastname
          email
        }
      }
    `)
  },
}

simple query

upper parcel
rough badger
#

I never used gql or vue, but i can try later

rough badger
late lotus
#

well I use graphql code generator for generating those stuff

#

so for me it would jsut be something like useUserQuery()

#

doesn't matter how you provide a valid graphql document but the result

rough badger
#

and you invoke it out side the machine ? or in the machine service ?

late lotus
#

well I would like to invoke it in the machine but I haven't found a way yet

#

even in a service do not now how to pull it off

rough badger
#

I need to think about this

molten sigil
late lotus
#

refine is just the short version

molten sigil
#

But doesn't let you set many options.refine is syntactic sugar around superRefine so to do more complex stuff superRefine is the better API to learn

rough badger
late lotus
#

thing is the apollo client is used directly in that case

rough badger
late lotus
#

more the opposite 😄

#

and remove all plugins but typescript-vue-apollo

#

that is what I am working with 😄

#

so that apollo client is abstracted away as well as the query content and so on

rough badger
molten sigil