ember-validated-form
ember-validated-form copied to clipboard
Best way to create inline forms with hasMany relationship?
I just started using your form extensions and also haven't used ember-changeset before. I'm currently struggling with figuring out the best way to have inline forms.
We have a candidate model which has one or more jobs. The form should look like this
- input: candidate.firstName
-- input: candidate.jobs[0].title
-- input: candidate.jobs[1].title
...
- Submit button
So I want to display multiple models from a hasMany relationship but with only a single submit button at the end of the form.
I did a quick test if nesting the forms would work like this
{{#validated-form
model=(changeset model CandidateValidations)
on-submit = (action "submit")
submit-label = 'Save' as |f|}}
{{f.input name="firstName"}}
{{#validated-form tagName="div"
model=(changeset model.jobs.firstObject JobValidations)
as |fi| }}
{{fi.input name="title"}}
{{/validated-form}}
{{/validated-form}}
It seems to work fine in a sense the inner and the outer changeset track the changes independently, but the outer changeset is not aware of the changes from the inner.
Now I think I can make it work, when on submit I collect the inner changesets, validate and apply them manually to the models.
But before digging deeper I wanted to ask whether there is a better approach to solve this.
Hi @smolotov,
we haven't tried nesting validated-forms yet, so I can't offer any deeper insights on this. I suppose that proper support for hasMany
relationships would require support for them in ember-changeset
and ember-changeset-validations
, which is not there yet (see this issue).
Would be great if you can report back your results on this, probably you're not the only one having this use-case :wink: