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``);