diff --git a/addon/components/bs-form/element.js b/addon/components/bs-form/element.js index 44f6e9e3b..07b0e0df0 100644 --- a/addon/components/bs-form/element.js +++ b/addon/components/bs-form/element.js @@ -258,25 +258,18 @@ export default class FormElement extends FormGroup { * @public */ get value() { + assert( + 'You can not set both property and value on a form element', + isBlank(this.args.property) || isBlank(this.args.value) + ); + if (this.args.property && this.args.model) { return get(this.args.model, this.args.property); } - return this._value; - } - - set value(value) { - assert('You cannot set both property and value on a form element', isBlank(this.args.property)); - this._value = value; + return this.args.value; } - /** - * Cache for value - * @type {null} - * @private - */ - @tracked _value = null; - /** The property name of the form element's `model` (by default the `model` of its parent `Components.Form`) that this form element should represent. The control element's value will automatically be bound to the model property's diff --git a/tests/integration/components/bs-form/element-test.js b/tests/integration/components/bs-form/element-test.js index 2c134a366..236d6a4eb 100644 --- a/tests/integration/components/bs-form/element-test.js +++ b/tests/integration/components/bs-form/element-test.js @@ -824,6 +824,22 @@ module('Integration | Component | bs-form/element', function (hooks) { ); }); + test('it can change a value instead of a property', async function (assert) { + this.set('update', (name) => this.set('name', name)); + this.set('name', 'Tomster'); + + await render(hbs` + + `); + + assert.dom('input').hasValue('Tomster'); + + await fillIn('input', 'Zoey'); + + assert.dom('input').hasValue('Zoey'); + assert.equal(this.name, 'Zoey'); + }); + // test for size property here to prevent regression of https://github.com/kaliber5/ember-bootstrap/issues/492 testBS3('support size classes', async function (assert) { await render(hbs``);