Dynamic Form

components.ad-form\.js

import Component from '@glimmer/component';
import { tracked } from "@glimmer/tracking";
import { set, action } from "@ember/object";

export default class extends Component {
  @tracked ads = [];
  @tracked selectedAdType = null;

  // this is just here for funsies
  get json() {
    return JSON.stringify(this.ads, null, 2);
  }

  adTypes = ["google", "facebook"];

  @action selectAdType(event) {
    this.selectedAdType = event.target.value;
  }

  @action
  addNewAd(type) {
    const { ads } = this;
    ads.push({
      type
    });
    // alternatively to this "reset" import A and add
    // to the ember array using pushObject instead of push
    this.ads = ads;
    this.selectedAdType = null;
    return false;
  }

  @action
  updateValue(ad, event) {
    const { name, value } = event.target;
    set(ad, name, value);
    
    // we only need this to cause our json getter
    // to update in the template since our simple objects
    // dont have tracked properties
    this.ads = this.ads; 
  }

  @action
  submitForm(event) {
    event.preventDefault();
    // post it!
    console.log("submitted", this.json);
    // clear it!
    this.ads = [];
  }
}

controllers.application\.js

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';
}

helpers.eq\.js

import { helper } from '@ember/component/helper';

export default helper(function eq([a, b]/*, hash*/) {
  return a === b;
});

templates.application\.hbs

<h1>Welcome to {{this.appName}}</h1>
<br>
<AdForm />
<br>
{{outlet}}
<br>
<br>

templates.components.ad-form\.hbs

<h1>Create Adds</h1>
<form novalidate {{on "submit" (fn this.addNewAd this.selectedAdType)}}>
  <strong>Add a new add</strong>
  <select {{on "change" this.selectAdType}}>
    <option>Select an Ad Type</option>
    {{#each this.adTypes as |type|}}
      <option value={{type}}>{{type}}</option>
    {{/each}}
  </select>
  {{#if this.selectedAdType}}
  <button type="submit" {{on "click" (fn this.addNewAd this.selectedAdType)}}>Add</button>
  {{/if}}
</form>
<hr>

<form novalidate {{on "submit" this.submitForm}}>
{{#each this.ads as |ad|}}
  <div>
    <strong>{{ad.type}}</strong><br>
    {{#if (eq ad.type "google")}}
      <!-- example of a dynamic field using a native input -->
      <label>
        Banner
        <input
          type="text"
          name="g-banner"
          value={{ad.g-banner}}
          {{on "input" (fn this.updateValue ad)}}
        />
      </label>
    
    {{else if (eq ad.type "facebook")}}
    
      <!-- example of a dynamic field using the build in Input  -->
      <label>
        Title
        <input
          name="fb-title"
          type="text"
          value={{ad.fb-title}}
          {{on "input" (fn this.updateValue ad)}}
        />
      </label>
    {{/if}}
    <hr>
  </div>
{{/each}}
  <button type="submit" {{on "click" this.submitForm}}>Submit</button>
</form>

<hr>
<h3>Form Data Preview</h3>
<pre><code>{{this.json}}</code></pre>

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}