ember-validated-form icon indicating copy to clipboard operation
ember-validated-form copied to clipboard

Best way to create inline forms with hasMany relationship?

Open victor-baumann opened this issue 6 years ago • 1 comments

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.

victor-baumann avatar Aug 22 '18 15:08 victor-baumann

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:

czosel avatar Aug 23 '18 07:08 czosel