Mutate changeset field value with ember-bootstrap custom element

Question

I'm on Ember 3.15 (Octane). With the following setup

template

<MyComponent
  @changeset={{changeset this.model this.MyValidationClass}}
  @onSubmit={{this.save}}
/>

component

<BsForm {{on 'submit' (fn this.submit @changeset)}}
  @model={{@changeset}}
  @formLayout="horizontal"
  as |form|>

  <form.element
    @label="My Custom Field"
    @property="myField" as |el|>

    <BsButtonGroup
      @value="{{el.value}}"
      @type="radio"
      @onChange="{{action (changeset-set @changeset 'myField') 'target.value'}}" 
      as |bg|>

      {{#each @changeset.options as |option|}}      // options is a string array ['first', 'second', 'third']
        <bg.button
          @type="info"
          @value="{{option}}">
          {{option}}
        </bg.button>
      {{/each}}

    </BsButtonGroup>
  </form.element>
</BsForm>

The problem I'm facing is that the changeset-set is not changing the value of myField when I change the radio button selection. I've tried

@onChange="{{action (mut el.value)}}

and

@onChange="{{action (changeset-set @changeset 'episodeType') this.target.value}}"

and

@onChange="{{action (changeset-set @changeset 'episodeType') this.buttonGroupValue}}"

I can see some malformed template code in your snippet. The curlies should not be wrapped with double-quotes. For instance, the code should be `@onChange={{action (mut el.value)}}` and not `@onChange="{{action (mut el.value)}}"` — Gokul Kathirvel, Jan 23 '20 at 11:54
Jeez, can't believe that's what it was. Thanks. If you could put that as an answer I can accept it — reggaemahn, Jan 23 '20 at 21:00

score 2 · Accepted Answer · answered Jan 24 '20 at 11:47

As mentioned in the comment, there are some malformed template code in your snippet.

The curlies should not be wrapped with double-quotes as it should be treated as dynamic content and not as strings. For instance, the code should be @onChange={{action (mut el.value)}} and not @onChange="{{action (mut el.value)}}"

Fixing the template should help.

Mutate changeset field value with ember-bootstrap custom element

1 Answers1