elementaccessor. You can even scoop up the attributes of parent elements. This leaves form submission in the cold, though... doesn't it? 🥶
formelement - or a child of that
formelement - then the data for the whole form will be serialized and made available to the Reflex action method as the
paramsis an instance of
ActionController::Parameterswhich you can manipulate the same way you would with a real form submitted via a normal POST action, with
permit. This is useful for validating models and setting multiple attributes of a model at the same time, even if it hasn't yet been saved to the datastore.
formelements as a familiar way to group related elements together. However, a lot of newcomers get attached to the idea that the form they are serializing is being used as an HTML form, which it is not.
<form></form>with no other mechanism or configuration required
paramsbefore its sent to the server
beforeReflexcallback by modifying
element.reflexData[reflexId]before it is sent to the server.
serializeForm: falseas one of the possible optional arguments to the
paramsaccessor in your Reflex class
paramsaccessor is available to your
after_reflexcallbacks in your server-side Reflex class. You are also free to add additional business logic on the client using the Reflex life-cycle callbacks in your Stimulus controllers.
paramsaccessor behaves as it does in a Rails controller, so you are free to lock it down and add nested models as you expect:
@postobject is instantiated from
paramsso if model validations fail, your Post model instance is still in scope when the page re-renders. The model's
errorscollection is available in the view. 🐛
data-reflex="change->Post#update"to each field. Since the field is inside the parent
formelement, all inputs are automatically serialized and sent to your Reflex class.
@post.comments.buildand because Rails knows about the association, any re-renders populate the empty form field as normal.
paramsaccessor, pointing to an empty
data-reflex-permanentso that you don't lose UI state when a Reflex is triggered.
<input>fields. You're going to need to clear your form so the user can add more data.
reflex-formand we'll use it to set a target on the first text field, as well as an action on the submit button:
PostReflex with a signed global ID.
@postobject is created from the
before_reflexcallback, users can click New comment many times to get new empty comments.
data-reflex-permanentwill not be morphed in any way.
formcontext, since it's not just a simple view helper that you can include.
morphthe HTML content required to successfully update the children of your target element. This requires that the outermost element of the supplied HTML matches the parent element:
div, in order to successfully replace the contents of "form_swap" we'll need to wrap it ourselves: