How to use ember-form-builder - 10 common examples

export var initialize = function(/* app */) {
  ENV.formBuilder = assign(configuration, ENV.formBuilder || {});

  let dataMixin = DataMixins[classify(ENV.formBuilder.dataAddon)];
  if (dataMixin) {
    FormBuilder.reopen(dataMixin);
  }
};

builder: computed({
    set(key, value) {
      if (value && value.builder) {
        return value.builder;
      } else {
        return value;
      }
    }
  }),

  focusOut() {
    once(this, this.set, 'hasFocusedOut', true);
  },

  canValidate: byDefault('hasFocusedOut', 'builder.isValid', function() {
    return this.get('hasFocusedOut') || !this.get('builder.isValid');
  }),

  init() {
    this._super(...arguments);

    defineProperty(this, 'validations', reads(`builder.validationAdapter.attributes.${this.get('attr')}`));

    var valueAttribute = "object." + this.get("attr");
    defineProperty(this, "value", computed(valueAttribute, {
      get: function() {
        return this.get(valueAttribute);
      },
      set: function(key, value) {
        this.set(valueAttribute, value);
        return value;

return EmberObject.extend(
      ...attrs.map((key) => key.split(':').length > 1 ?
        {
          [key.split(':')[0]]: alias(`content.${key.split(':')[1]}`)
        } : {
          [key]: alias(`content.${key}`)
        }
      )
    ).create({ content: this });
  }),

  texts: computed(function() {
    return TextProxy.create({ content: this });
  }),

  inputElementId: byDefault("elementId", function() {
    return this.get("elementId") + "Input";
  }),

  name: computed('builder.name', 'attr', function() {
    var prefix = this.get('builder.name');
    var name = this.get('attr');
    if (isPresent(prefix)) {
      name = prefix + '[' + name + ']';
    }
    return name;
  }),

  combinedDisabled: computed('builder.isLoading', 'disabled', function() {
    return !!this.get('builder.isLoading') || !!this.get('disabled');
  })
}).reopenClass({

disabled: oneWay("builder.isLoading"),
  builder: computed({
    get() {
      return this._builder;
    },
    set(key, value) {
      if (value && value.builder) {
        return this._builder = value.builder;
      } else {
        return this._builder = value;
      }
    }
  }),

  text: byDefault('builder.translationKey', 'translationService.locale', function() {
    return this.get('translationService').t(this.get('builder.translationKey'), 'action', 'submit') || 'Save';
  })
});

SimpleSubmit.reopenClass({
  positionalParams: ["builder"]
});

export default SimpleSubmit;

import { inject as service } from '@ember/service';
import humanize from "ember-form-builder/utilities/humanize";
import guessType from "ember-form-builder/utilities/guess-type";
import byDefault from 'ember-form-builder/utilities/by-default';
import { once } from '@ember/runloop';
import { A } from '@ember/array';

export default Component.extend({
  layout,

  'data-test-input-type': reads('type'),
  'data-test-input-name': reads('name'),

  translationService: service("formBuilderTranslations"),
  hasFocusedOut: false,
  as: byDefault("_model", "attr", function() {
    return guessType(this.get("_model"), this.get("attr"), this);
  }),
  attr: null,

  type:           reads('as'),
  wrapper:        'default',
  object:         reads('builder.object'),
  _model:         reads('builder.model'),
  modelName:      reads('builder.modelName'),
  configuration:  reads('builder.configuration'),

  builder: computed({
    set(key, value) {
      if (value && value.builder) {
        return value.builder;
      } else {

},

  validationAdapter: computed('configuration.validationsAddon', function() {
    let name = this.get('configuration.validationsAddon');
    return getOwner(this).factoryFor(`validation-adapter:${name}`).create({ object: this.object });
  }),

  dataAdapter: computed('configuration.validationsAddon', function() {
    let name = this.get('configuration.dataAddon');
    return getOwner(this).factoryFor(`data-adapter:${name}`).create({ object: this.object });
  }),

  model: reads('dataAdapter.model'),
  modelName: reads('dataAdapter.modelName'),

  translationKey: byDefault('modelName', function() {
    return camelize(this.get('modelName') || '');
  }),

  name: computed('modelName', 'parent.name', 'index', function() {
    let prefix = camelize(this.get('parent.name') || '');
    let name = camelize(this.get('modelName') || '');
    let index = this.get('index');
    if (!isBlank(index)) {
      name = pluralize(name);
    }
    return A([ prefix, name, index ])
      .reject(isBlank).map(
        (n, i) => i > 0 ? `[${n}]` : n
      ).join('');
  }),

change() {
    var indices = [];
    this.element.querySelectorAll('input').forEach(function(input, i) {
      if(input.checked) {
        indices.push(i);
      }
    });
    this._setSelection(indices);
  },

  inputType: computed('multiple', function() {
    return this.get('multiple') ? 'checkbox' : 'radio';
  }),

  inputName: byDefault('config.elementId', function() {
    return this.get('config.elementId') + '-radio';
  })
});

import FormBuilder from 'ember-form-builder/components/form-builder';
import { computed } from '@ember/object';

export default FormBuilder.extend({
  tagName: 'div',

  parentFormBuilder: computed('on.formBuilder', {
    get() {
      return this._parentFormBuilder || this.get('on.formBuilder') || this.get('on');
    },
    set(k, v) {
      return this._parentFormBuilder = v;
    }
  }),

  didInsertElement() {
    this._super(...arguments);
    this.get('parentFormBuilder').addChild(this.get('formBuilder'));
  },

import { computed } from '@ember/object';
import CollectionInput from 'ember-form-builder/components/inputs/collection-input';
import byDefault from 'ember-form-builder/utilities/by-default';

export default CollectionInput.extend({
  tagName: 'div',
  optionComponentName: 'inputs/checkbox-option',

  change() {
    var indices = [];
    this.element.querySelectorAll('input').forEach(function(input, i) {
      if(input.checked) {
        indices.push(i);
      }
    });
    this._setSelection(indices);
  },

  inputType: computed('multiple', function() {
    return this.get('multiple') ? 'checkbox' : 'radio';
  }),

import SelectOption from 'ember-form-builder/components/inputs/select-option';
import layout from '../../templates/components/inputs/checkbox-option';
import { computed } from '@ember/object';
import { alias } from '@ember/object/computed';

export default SelectOption.extend({
  layout,
  
  tagName: "div",
  attributeBindings: [],

  isChecked: alias("isSelected"),

  inputElementId: computed("elementId", function() {
    return this.get("elementId") + "-input";
  })
});