diff --git a/addon/components/paper-button.js b/addon/components/paper-button.js
index efa94f574..5d2c4416d 100644
--- a/addon/components/paper-button.js
+++ b/addon/components/paper-button.js
@@ -3,7 +3,6 @@
  */
 import Focusable from './-focusable';
 import { action } from '@ember/object';
-import { assert } from '@ember/debug';
 
 /**
  * @class PaperButton
@@ -34,14 +33,12 @@ export default class PaperButton extends Focusable {
   constructor(owner, args) {
     super(owner, args);
 
-    this.shouldRegister = this.args.shouldRegister || false;
+    this.shouldRegister = this.args.shouldRegister ?? false;
     this.skipProxy = this.args.skipProxy || false;
-    if (this.shouldRegister) {
-      assert(
-        'A parent component should be supplied to <PaperButton> when shouldRegister=true',
-        this.args.parentComponent
-      );
-      this.parent = this.args.parentComponent;
+
+    let parentComponent = this.args.parentComponent;
+    if (parentComponent && this.shouldRegister) {
+      this.parent = parentComponent;
     }
   }
 
@@ -53,8 +50,9 @@ export default class PaperButton extends Focusable {
     this.element = element;
     this.registerListeners(element);
 
-    if (this.shouldRegister) {
-      this.parent.registerChild(this);
+    let parent = this.parent;
+    if (parent && this.shouldRegister) {
+      parent.registerChild(this);
     }
   }
 
@@ -76,8 +74,9 @@ export default class PaperButton extends Focusable {
   willDestroy() {
     super.willDestroy(...arguments);
 
-    if (this.shouldRegister) {
-      this.parent.unregisterChild(this);
+    let parent = this.parent;
+    if (parent && this.shouldRegister) {
+      parent.unregisterChild(this);
     }
   }
 
diff --git a/addon/components/paper-checkbox.js b/addon/components/paper-checkbox.js
index c96860603..fd3e405d7 100644
--- a/addon/components/paper-checkbox.js
+++ b/addon/components/paper-checkbox.js
@@ -51,15 +51,12 @@ export default class PaperCheckbox extends Focusable {
     super(owner, args);
 
     this.labelId = `${guidFor(args)}-label`;
-    this.shouldRegister = this.args.shouldRegister || false;
+    this.shouldRegister = this.args.shouldRegister ?? false;
     this.skipProxy = this.args.skipProxy || false;
 
-    if (this.shouldRegister) {
-      assert(
-        'A parent component should be supplied to <PaperCheckbox> when shouldRegister=true',
-        this.args.parentComponent
-      );
-      this.parent = this.args.parentComponent;
+    let parentComponent = this.args.parentComponent;
+    if (parentComponent && this.shouldRegister) {
+      this.parent = parentComponent;
     }
 
     assert(
@@ -76,8 +73,9 @@ export default class PaperCheckbox extends Focusable {
     this.element = element;
     this.registerListeners(element);
 
-    if (this.shouldRegister) {
-      this.parent.registerChild(this);
+    let parent = this.parent;
+    if (parent && this.shouldRegister) {
+      parent.registerChild(this);
     }
   }
 
@@ -96,8 +94,9 @@ export default class PaperCheckbox extends Focusable {
   willDestroy() {
     super.willDestroy(...arguments);
 
-    if (this.shouldRegister) {
-      this.parent.unregisterChild(this);
+    let parent = this.parent;
+    if (parent && this.shouldRegister) {
+      parent.unregisterChild(this);
     }
   }
 
diff --git a/addon/components/paper-form.hbs b/addon/components/paper-form.hbs
index 7211e91f2..7219a435b 100644
--- a/addon/components/paper-form.hbs
+++ b/addon/components/paper-form.hbs
@@ -1,23 +1,30 @@
-{{! template-lint-disable no-action }}
-{{yield (hash
-  isValid=this.isValid
-  isInvalid=this.isInvalid
-  isTouched=this.isTouched
-  isInvalidAndTouched=this.isInvalidAndTouched
-  input=(component this.inputComponent
-    parentComponent=this
-    onValidityChange=(action "localOnValidityChange")
-  )
-  submit-button=(component this.submitButtonComponent
-    type="submit"
-  )
-  select=(component this.selectComponent
-  	parentComponent=this
-  	onValidityChange=(action "localOnValidityChange")
-  )
-  autocomplete=(component this.autocompleteComponent
-  	parentComponent=this
-  	onValidityChange=(action "localOnValidityChange")
-  )
-  onSubmit=(action "localOnSubmit")
-)}}
+<form class={{@class}} {{on 'submit' this.submit}} ...attributes>
+  {{yield
+    (hash
+      isValid=this.isValid
+      isInvalid=this.isInvalid
+      isTouched=this.isTouched
+      isInvalidAndTouched=this.isInvalidAndTouched
+      input=(component
+        this.inputComponent
+        parentComponent=this
+        onValidityChange=this.localOnValidityChange
+        shouldRegister=true
+      )
+      submit-button=(component this.submitButtonComponent type='submit')
+      select=(component
+        this.selectComponent
+        parentComponent=this
+        onValidityChange=this.localOnValidityChange
+        shouldRegister=true
+      )
+      autocomplete=(component
+        this.autocompleteComponent
+        parentComponent=this
+        onValidityChange=this.localOnValidityChange
+      )
+      onSubmit=this.localOnSubmit
+      parent=this
+    )
+  }}
+</form>
\ No newline at end of file
diff --git a/addon/components/paper-form.js b/addon/components/paper-form.js
index 9ab8df345..84986c2fc 100644
--- a/addon/components/paper-form.js
+++ b/addon/components/paper-form.js
@@ -1,71 +1,126 @@
-/* eslint-disable ember/classic-decorator-no-classic-methods, ember/no-classic-components, ember/no-computed-properties-in-native-classes, ember/no-mixins */
-import { tagName } from '@ember-decorators/component';
-import { action, computed } from '@ember/object';
-import { and, not } from '@ember/object/computed';
-
-import Component from '@ember/component';
-import ParentMixin from 'ember-paper/mixins/parent-mixin';
-import { invokeAction } from 'ember-paper/utils/invoke-action';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { A } from '@ember/array';
 
 /**
  * @class PaperForm
- * @extends Ember.Component
- * @uses ParentMixin
+ * @extends Component
  */
-@tagName('form')
-export default class PaperForm extends Component.extend(ParentMixin) {
-  inputComponent = 'paper-input';
-  submitButtonComponent = 'paper-button';
-  selectComponent = 'paper-select';
-  autocompleteComponent = 'paper-autocomplete';
+export default class PaperForm extends Component {
+  /**
+   * inputComponent specifies the component to be yielded as an input field.
+   * @type {string}
+   */
+  inputComponent;
+  /**
+   * submitButtonComponent specifies the component to be yielded as a submit button.
+   * @type {string}
+   */
+  submitButtonComponent;
+  /**
+   * selectComponent specifies the component to be yielded as a select field.
+   * @type {string}
+   */
+  selectComponent;
+  /**
+   * autocompleteComponent specifies the component to be yielded as an autocomplete field.
+   * @type {string}
+   */
+  autocompleteComponent;
+
+  /**
+   * Array of form components
+   * @type {A}
+   */
+  @tracked children = A([]);
+  /**
+   * Used to track whether the forms validity has changed from the last check in.
+   * @type {boolean}
+   */
+  @tracked lastIsTouched = false;
+  /**
+   * Used to track whether the forms validity has changed from the last check in.
+   * @type {boolean}
+   */
+  @tracked lastIsValid = false;
+
+  constructor() {
+    super(...arguments);
 
-  @not('isInvalid')
-  isValid;
+    this.inputComponent = this.args.inputComponent || 'paper-input';
+    this.submitButtonComponent =
+      this.args.submitButtonComponent || 'paper-button';
+    this.selectComponent = this.args.selectComponent || 'paper-select';
+    this.autocompleteComponent =
+      this.args.autocompleteComponent || 'paper-autocomplete';
+  }
+
+  /**
+   * Registers a child form component
+   * @param {Component} child - The form component to register
+   */
+  @action registerChild(child) {
+    this.children.pushObject(child);
+  }
+  /**
+   * Removes a registered child form component
+   * @param {Component} child - The form component to unregister
+   */
+  @action unregisterChild(child) {
+    this.children.removeObject(child);
+  }
+
+  get isValid() {
+    return !this.isInvalid;
+  }
 
-  @computed('childComponents.@each.isInvalid')
   get isInvalid() {
-    return this.childComponents.isAny('isInvalid');
+    return this.children.isAny('validation.isInvalid');
   }
 
-  @computed('childComponents.@each.isTouched')
   get isTouched() {
-    return this.childComponents.isAny('isTouched');
+    return this.children.isAny('validation.isTouched');
   }
 
-  @and('isInvalid', 'isTouched')
-  isInvalidAndTouched;
+  get isInvalidAndTouched() {
+    return this.isInvalid && this.isTouched;
+  }
 
-  submit() {
-    this.send('localOnSubmit');
-    return false;
+  @action submit(event) {
+    this.localOnSubmit();
+    event.preventDefault();
   }
 
-  @action
-  localOnValidityChange() {
+  @action localOnValidityChange() {
     if (
       this.lastIsValid !== this.isValid ||
       this.lastIsTouched !== this.isTouched
     ) {
-      invokeAction(
-        this,
-        'onValidityChange',
-        this.isValid,
-        this.isTouched,
-        this.isInvalidAndTouched
-      );
-      this.set('lastIsValid', this.isValid);
-      this.set('lastIsTouched', this.isTouched);
+      if (this.args.onValidityChange) {
+        this.args.onValidityChange(
+          this.isValid,
+          this.isTouched,
+          this.isInvalidAndTouched
+        );
+      }
+
+      this.lastIsValid = this.isValid;
+      this.lastIsTouched = this.isTouched;
     }
   }
 
-  @action
-  localOnSubmit() {
+  @action localOnSubmit() {
     if (this.isInvalid) {
-      this.childComponents.setEach('isTouched', true);
-      invokeAction(this, 'onInvalid');
+      this.children.setEach('validation.isTouched', true);
+      if (this.args.onInvalid) {
+        this.args.onInvalid();
+      }
     } else {
-      invokeAction(this, 'onSubmit');
-      this.childComponents.setEach('isTouched', false);
+      if (this.args.onSubmit) {
+        this.args.onSubmit();
+      }
+      this.children.setEach('validation.isTouched', false);
     }
   }
 }
diff --git a/addon/components/paper-input.js b/addon/components/paper-input.js
index 5426f0d2b..50b9352d8 100644
--- a/addon/components/paper-input.js
+++ b/addon/components/paper-input.js
@@ -36,14 +36,14 @@ export default class PaperInput extends Focusable {
    * @type {HTMLInputElement}
    * @private
    */
-  #inputElement;
+  inputElement;
   /**
    * The parent this component is bound to.
    *
    * @type {PaperRadioGroup|PaperForm|PaperItem|PaperTabs}
    * @private
    */
-  #parent;
+  parent;
   /**
    * Marks whether the component should register itself to the supplied parent.
    *
@@ -97,6 +97,7 @@ export default class PaperInput extends Focusable {
       this.args.elementId || this.args.inputElementId || guidFor(this);
     this.inputElementId = this.args.inputElementId || `input-${elementId}`;
     this.lineHeight = this.args.lineHeight || null;
+    this.shouldRegister = this.args.shouldRegister ?? true;
 
     // Construct Input Validation and pass through of custom attributes.
     this.validation = new Validation(
@@ -109,12 +110,9 @@ export default class PaperInput extends Focusable {
       this.args.isTouched
     );
 
-    if (this.shouldRegister) {
-      assert(
-        'A parent component should be supplied to <PaperInput> when shouldRegister=true',
-        this.args.parentComponent
-      );
-      this.#parent = this.args.parentComponent;
+    let parentComponent = this.args.parentComponent;
+    if (parentComponent && this.shouldRegister) {
+      this.parent = parentComponent;
     }
 
     assert(
@@ -132,7 +130,7 @@ export default class PaperInput extends Focusable {
     this.registerListeners(element);
 
     let inputElement = element.querySelector('input, textarea');
-    this.#inputElement = inputElement;
+    this.inputElement = inputElement;
     this.validation.didInsertNode(inputElement);
 
     // setValue ensures that the input value is the same as this.value
@@ -143,8 +141,9 @@ export default class PaperInput extends Focusable {
       window.addEventListener('resize', this.growTextarea.bind(this));
     }
 
-    if (this.shouldRegister) {
-      this.#parent.registerChild(this);
+    let parent = this.parent;
+    if (parent && this.shouldRegister) {
+      parent.registerChild(this);
     }
   }
 
@@ -180,8 +179,9 @@ export default class PaperInput extends Focusable {
   willDestroy() {
     super.willDestroy(...arguments);
 
-    if (this.shouldRegister) {
-      this.#parent.unregisterChild(this);
+    let parent = this.parent;
+    if (parent && this.shouldRegister) {
+      parent.unregisterChild(this);
     }
   }
 
@@ -307,7 +307,7 @@ export default class PaperInput extends Focusable {
    */
   growTextarea() {
     if (this.args.textarea) {
-      let inputElement = this.#inputElement;
+      let inputElement = this.inputElement;
 
       inputElement.classList.add('md-no-flex');
       inputElement.setAttribute('rows', '1');
@@ -318,7 +318,7 @@ export default class PaperInput extends Focusable {
         let lineHeight = this.lineHeight;
         if (!lineHeight) {
           inputElement.style.minHeight = '0';
-          lineHeight = this.#inputElement.clientHeight;
+          lineHeight = this.inputElement.clientHeight;
           inputElement.style.minHeight = null;
         }
         if (lineHeight) {
@@ -372,8 +372,8 @@ export default class PaperInput extends Focusable {
     // normalize falsy values to empty string
     value = isEmpty(value) ? '' : value;
 
-    if (this.#inputElement.value !== value) {
-      this.#inputElement.value = value;
+    if (this.inputElement.value !== value) {
+      this.inputElement.value = value;
     }
 
     // Calculate Input Validity
diff --git a/addon/components/paper-radio-proxiable.js b/addon/components/paper-radio-proxiable.js
index 444ebbd53..4f5880bb3 100644
--- a/addon/components/paper-radio-proxiable.js
+++ b/addon/components/paper-radio-proxiable.js
@@ -8,6 +8,12 @@ import PaperRadio from './paper-radio';
  * @extends PaperRadioBase
  */
 export default class PaperRadioProxiable extends PaperRadio {
+  constructor(owner, args) {
+    super(owner, args);
+
+    this.shouldRegister = this.args.shouldRegister ?? false;
+  }
+
   processProxy() {
     this.onClick();
   }
diff --git a/addon/components/paper-radio.js b/addon/components/paper-radio.js
index e02b8f2f8..45062aff9 100644
--- a/addon/components/paper-radio.js
+++ b/addon/components/paper-radio.js
@@ -3,7 +3,6 @@
  */
 import PaperRadioBase from './paper-radio-base';
 import { action } from '@ember/object';
-import { assert } from '@ember/debug';
 
 /**
  * @class PaperRadio
@@ -30,13 +29,11 @@ export default class PaperRadio extends PaperRadioBase {
     super(owner, args);
 
     this.skipProxy = this.args.skipProxy || false;
-    this.shouldRegister = this.args.shouldRegister || false;
-    if (this.shouldRegister) {
-      assert(
-        'A parent component should be supplied to <PaperRadio> when shouldRegister=true',
-        this.args.parentComponent
-      );
-      this.parent = this.args.parentComponent;
+    this.shouldRegister = this.args.shouldRegister ?? true;
+
+    let parentComponent = this.args.parentComponent;
+    if (parentComponent && this.shouldRegister) {
+      this.parent = parentComponent;
     }
   }
 
@@ -47,16 +44,18 @@ export default class PaperRadio extends PaperRadioBase {
   @action didInsertNode(element) {
     super.didInsertNode(element);
 
-    if (this.shouldRegister) {
-      this.parent.registerChild(this);
+    let parent = this.parent;
+    if (parent && this.shouldRegister) {
+      parent.registerChild(this);
     }
   }
 
   willDestroy() {
     super.willDestroy(...arguments);
 
-    if (this.shouldRegister) {
-      this.parent.unregisterChild(this);
+    let parent = this.parent;
+    if (parent && this.shouldRegister) {
+      parent.unregisterChild(this);
     }
   }
 }
diff --git a/addon/components/paper-select/index.js b/addon/components/paper-select/index.js
index 86f1d00f9..c0bbd6dd1 100644
--- a/addon/components/paper-select/index.js
+++ b/addon/components/paper-select/index.js
@@ -41,7 +41,7 @@ export default class PaperSelect extends Component {
    * @type {PaperRadioGroup|PaperForm|PaperItem|PaperTabs}
    * @private
    */
-  #parent;
+  parent;
   /**
    * Marks whether the component should register itself to the supplied parent.
    *
@@ -68,6 +68,7 @@ export default class PaperSelect extends Component {
 
     this.didAnimateScale = false;
     this.isFocused = false;
+    this.shouldRegister = this.args.shouldRegister ?? true;
 
     const elementId =
       this.args.elementId || this.args.inputElementId || guidFor(this);
@@ -83,12 +84,9 @@ export default class PaperSelect extends Component {
       this.args.isTouched
     );
 
-    if (this.shouldRegister) {
-      assert(
-        'A parent component should be supplied to <PaperInput> when shouldRegister=true',
-        this.args.parentComponent
-      );
-      this.#parent = this.args.parentComponent;
+    let parentComponent = this.args.parentComponent;
+    if (parentComponent && this.shouldRegister) {
+      this.parent = parentComponent;
     }
 
     assert(
@@ -106,8 +104,9 @@ export default class PaperSelect extends Component {
     // setValue ensures that the input value is the same as this.value
     this.validation.value = this.args.selected;
 
-    if (this.shouldRegister) {
-      this.#parent.registerChild(this);
+    let parent = this.parent;
+    if (parent && this.shouldRegister) {
+      parent.registerChild(this);
     }
   }
 
@@ -140,8 +139,9 @@ export default class PaperSelect extends Component {
   willDestroy() {
     super.willDestroy(...arguments);
 
-    if (this.shouldRegister) {
-      this.#parent.unregisterChild(this);
+    let parent = this.parent;
+    if (parent && this.shouldRegister) {
+      parent.unregisterChild(this);
     }
   }
 
diff --git a/addon/components/paper-switch.js b/addon/components/paper-switch.js
index 90a2a12c7..42bddf904 100644
--- a/addon/components/paper-switch.js
+++ b/addon/components/paper-switch.js
@@ -60,16 +60,13 @@ export default class PaperSwitch extends Focusable {
   constructor(owner, args) {
     super(owner, args);
 
-    this.shouldRegister = this.args.shouldRegister || false;
+    this.shouldRegister = this.args.shouldRegister ?? false;
     this.skipProxy = this.args.skipProxy || false;
     this.toggle = this.args.toggle || false;
 
-    if (this.shouldRegister) {
-      assert(
-        'A parent component should be supplied to <PaperSwitch> when shouldRegister=true',
-        this.args.parentComponent
-      );
-      this.parent = this.args.parentComponent;
+    let parentComponent = this.args.parentComponent;
+    if (parentComponent && this.shouldRegister) {
+      this.parent = parentComponent;
     }
 
     assert(
@@ -86,8 +83,9 @@ export default class PaperSwitch extends Focusable {
     this.element = element;
     this.registerListeners(element);
 
-    if (this.shouldRegister) {
-      this.parent.registerChild(this);
+    let parent = this.parent;
+    if (parent && this.shouldRegister) {
+      parent.registerChild(this);
     }
 
     // Only setup if the switch is not disabled
@@ -118,8 +116,9 @@ export default class PaperSwitch extends Focusable {
   willDestroy() {
     super.willDestroy(...arguments);
 
-    if (this.shouldRegister) {
-      this.parent.unregisterChild(this);
+    let parent = this.parent;
+    if (parent && this.shouldRegister) {
+      parent.unregisterChild(this);
     }
   }
 
diff --git a/addon/components/paper-tab.js b/addon/components/paper-tab.js
index 25ed0aa81..8bfc056c9 100644
--- a/addon/components/paper-tab.js
+++ b/addon/components/paper-tab.js
@@ -5,7 +5,6 @@ import Focusable from './-focusable';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { htmlSafe } from '@ember/template';
-import { assert } from '@ember/debug';
 
 /**
  * @class PaperTab
@@ -72,13 +71,10 @@ export default class PaperTab extends Focusable {
       this.tag = 'a';
     }
 
-    this.shouldRegister = this.args.shouldRegister || true;
-    if (this.shouldRegister) {
-      assert(
-        'A parent component should be supplied to <PaperTab>',
-        this.args.parentComponent
-      );
-      this.parent = this.args.parentComponent;
+    this.shouldRegister = this.args.shouldRegister ?? true;
+    let parentComponent = this.args.parentComponent;
+    if (parentComponent && this.shouldRegister) {
+      this.parent = parentComponent;
     }
   }
 
@@ -94,8 +90,9 @@ export default class PaperTab extends Focusable {
 
     this.registerListeners(element);
 
-    if (this.shouldRegister) {
-      this.parent.registerChild(this);
+    let parent = this.parent;
+    if (parent && this.shouldRegister) {
+      parent.registerChild(this);
     }
   }
 
@@ -123,8 +120,9 @@ export default class PaperTab extends Focusable {
   willDestroy() {
     super.willDestroy();
 
-    if (this.shouldRegister) {
-      this.parent.unregisterChild(this);
+    let parent = this.parent;
+    if (parent && this.shouldRegister) {
+      parent.unregisterChild(this);
     }
   }
 
diff --git a/addon/mixins/child-mixin.js b/addon/mixins/child-mixin.js
index 9c01d0f28..ff6c680b7 100644
--- a/addon/mixins/child-mixin.js
+++ b/addon/mixins/child-mixin.js
@@ -1,4 +1,4 @@
-/* eslint-disable ember/no-mixins, ember/require-computed-property-dependencies, prettier/prettier */
+/* eslint-disable ember/no-mixins, ember/require-computed-property-dependencies */
 /**
  * @module ember-paper
  */
@@ -12,7 +12,6 @@ import ParentMixin from 'ember-paper/mixins/parent-mixin';
  * @extends Ember.Mixin
  */
 export default Mixin.create({
-
   // override to look for a specific parent class
   parentClass: ParentMixin,
 
@@ -27,21 +26,27 @@ export default Mixin.create({
     },
 
     set(key, value) {
-      return this._parentComponent = value;
-    }
+      return (this._parentComponent = value);
+    },
   }),
 
   init() {
     this._super(...arguments);
     if (this.parentComponent) {
-      this.parentComponent.register(this);
+      let register = this.parentComponent.register
+        ? this.parentComponent.register
+        : this.parentComponent.registerChild;
+      register(this);
     }
   },
 
   willDestroyElement() {
     this._super(...arguments);
     if (this.parentComponent) {
-      this.parentComponent.unregister(this);
+      let unregister = this.parentComponent.register
+        ? this.parentComponent.unregister
+        : this.parentComponent.unregisterChild;
+      unregister(this);
     }
-  }
+  },
 });
diff --git a/tests/integration/components/paper-form-test.js b/tests/integration/components/paper-form-test.js
index 8e1d95844..04c6b2f1e 100644
--- a/tests/integration/components/paper-form-test.js
+++ b/tests/integration/components/paper-form-test.js
@@ -1,14 +1,14 @@
-/* eslint-disable ember/no-classic-components, prettier/prettier */
+/* eslint-disable ember/no-classic-components */
 import Component from '@ember/component';
-import { module, test } from 'qunit';
+import { module, test, skip } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render, triggerEvent, click } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
-module('Integration | Component | paper form', function(hooks) {
+module('Integration | Component | paper form', function (hooks) {
   setupRenderingTest(hooks);
 
-  test('`isInvalid` and `isValid` work as expected', async function(assert) {
+  test('`isInvalid` and `isValid` work as expected', async function (assert) {
     assert.expect(4);
 
     await render(hbs`
@@ -29,19 +29,22 @@ module('Integration | Component | paper form', function(hooks) {
     assert.dom('.invalid-div').doesNotExist();
     assert.dom('.valid-div').exists({ count: 1 });
 
-    this.set('errors', [{
-      message: 'foo should be a number.',
-      attribute: 'foo'
-    }, {
-      message: 'foo should be smaller than 12.',
-      attribute: 'foo'
-    }]);
+    this.set('errors', [
+      {
+        message: 'foo should be a number.',
+        attribute: 'foo',
+      },
+      {
+        message: 'foo should be smaller than 12.',
+        attribute: 'foo',
+      },
+    ]);
 
     assert.dom('.invalid-div').exists({ count: 1 });
     assert.dom('.valid-div').doesNotExist();
   });
 
-  test('form `onSubmit` action is invoked and `onInvalid` is not', async function(assert) {
+  test('form `onSubmit` action is invoked and `onInvalid` is not', async function (assert) {
     assert.expect(1);
 
     this.set('onSubmit', () => {
@@ -65,7 +68,7 @@ module('Integration | Component | paper form', function(hooks) {
     await click('button');
   });
 
-  test('form `onInvalid` action is invoked and `onSubmit` is not when the form is not valid', async function(assert) {
+  test('form `onInvalid` action is invoked and `onSubmit` is not when the form is not valid', async function (assert) {
     assert.expect(1);
 
     this.set('onSubmit', () => {
@@ -87,7 +90,7 @@ module('Integration | Component | paper form', function(hooks) {
     await click('button[type=submit]');
   });
 
-  test('form `onValidityChange` action is invoked', async function(assert) {
+  test('form `onValidityChange` action is invoked', async function (assert) {
     // paper-input triggers `onValidityChange` on render
     // so we expect two runs: one on render and another on validity change
     assert.expect(9);
@@ -119,17 +122,19 @@ module('Integration | Component | paper form', function(hooks) {
       assert.ok(isInvalidAndTouched);
     });
 
-    this.set('errors', [{
-      message: 'foo should be a number.',
-      attribute: 'foo'
-    }, {
-      message: 'foo should be smaller than 12.',
-      attribute: 'foo'
-    }]);
-
+    this.set('errors', [
+      {
+        message: 'foo should be a number.',
+        attribute: 'foo',
+      },
+      {
+        message: 'foo should be smaller than 12.',
+        attribute: 'foo',
+      },
+    ]);
   });
 
-  test('form is reset after submit action is invoked', async function(assert) {
+  test('form is reset after submit action is invoked', async function (assert) {
     assert.expect(3);
 
     await render(hbs`
@@ -155,7 +160,7 @@ module('Integration | Component | paper form', function(hooks) {
     assert.dom('.ng-dirty').doesNotExist('inputs were reset');
   });
 
-  test('works without using contextual components', async function(assert) {
+  skip('works without using contextual components', async function (assert) {
     assert.expect(4);
 
     await render(hbs`
@@ -176,19 +181,58 @@ module('Integration | Component | paper form', function(hooks) {
     assert.dom('.invalid-div').doesNotExist();
     assert.dom('.valid-div').exists({ count: 1 });
 
-    this.set('errors', [{
-      message: 'foo should be a number.',
-      attribute: 'foo'
-    }, {
-      message: 'foo should be smaller than 12.',
-      attribute: 'foo'
-    }]);
+    this.set('errors', [
+      {
+        message: 'foo should be a number.',
+        attribute: 'foo',
+      },
+      {
+        message: 'foo should be smaller than 12.',
+        attribute: 'foo',
+      },
+    ]);
+
+    assert.dom('.invalid-div').exists({ count: 1 });
+    assert.dom('.valid-div').doesNotExist();
+  });
+
+  test('works without using contextual components by binding in the yielded parent', async function (assert) {
+    assert.expect(4);
+
+    await render(hbs`
+      {{#paper-form as |form|}}
+        {{paper-input parentComponent=form.parent value=foo onChange=(action (mut foo)) label="Foo"}}
+        {{paper-input parentComponent=form.parent value=bar onChange=(action (mut bar)) label="Bar" errors=errors}}
+
+        {{#if form.isInvalid}}
+          <div class="invalid-div">Form is invalid!</div>
+        {{/if}}
+        {{#if form.isValid}}
+          <div class="valid-div">Form is valid!</div>
+        {{/if}}
+
+      {{/paper-form}}
+    `);
+
+    assert.dom('.invalid-div').doesNotExist();
+    assert.dom('.valid-div').exists({ count: 1 });
+
+    this.set('errors', [
+      {
+        message: 'foo should be a number.',
+        attribute: 'foo',
+      },
+      {
+        message: 'foo should be smaller than 12.',
+        attribute: 'foo',
+      },
+    ]);
 
     assert.dom('.invalid-div').exists({ count: 1 });
     assert.dom('.valid-div').doesNotExist();
   });
 
-  test('form submit button renders', async function(assert) {
+  test('form submit button renders', async function (assert) {
     assert.expect(1);
 
     await render(hbs`
@@ -200,7 +244,7 @@ module('Integration | Component | paper form', function(hooks) {
     assert.dom('button').exists({ count: 1 });
   });
 
-  test('form submit button calls form onSubmit action', async function(assert) {
+  test('form submit button calls form onSubmit action', async function (assert) {
     assert.expect(1);
 
     this.set('onSubmit', () => {
@@ -216,7 +260,7 @@ module('Integration | Component | paper form', function(hooks) {
     await click('button');
   });
 
-  test('form submit button is of type submit', async function(assert) {
+  test('form submit button is of type submit', async function (assert) {
     assert.expect(1);
 
     await render(hbs`
@@ -228,12 +272,15 @@ module('Integration | Component | paper form', function(hooks) {
     assert.dom('button').hasAttribute('type', 'submit');
   });
 
-  test('form submit button component can be customized by passing `submitButtonComponent`', async function(assert) {
+  test('form submit button component can be customized by passing `submitButtonComponent`', async function (assert) {
     assert.expect(1);
 
-    this.owner.register('component:custom-submit-button', Component.extend({
-      classNames: ['custom-submit-button']
-    }));
+    this.owner.register(
+      'component:custom-submit-button',
+      Component.extend({
+        classNames: ['custom-submit-button'],
+      })
+    );
 
     await render(hbs`
       {{#paper-form submitButtonComponent="custom-submit-button" as |form|}}
@@ -241,11 +288,12 @@ module('Integration | Component | paper form', function(hooks) {
       {{/paper-form}}
     `);
 
-    assert.dom('.custom-submit-button')
+    assert
+      .dom('.custom-submit-button')
       .exists({ count: 1 }, 'custom submit button is displayed');
   });
 
-  test('form `onSubmit` action is invoked when form element is submitted', async function(assert) {
+  test('form `onSubmit` action is invoked when form element is submitted', async function (assert) {
     assert.expect(1);
 
     this.set('onSubmit', () => {
@@ -265,12 +313,15 @@ module('Integration | Component | paper form', function(hooks) {
     await click('input[type=submit]');
   });
 
-  test('yielded form.input renders the `paper-input`-component', async function(assert) {
+  test('yielded form.input renders the `paper-input`-component', async function (assert) {
     assert.expect(1);
 
-    this.owner.register('component:paper-input', Component.extend({
-      classNames: ['paper-input']
-    }));
+    this.owner.register(
+      'component:paper-input',
+      Component.extend({
+        classNames: ['paper-input'],
+      })
+    );
 
     await render(hbs`
       {{#paper-form as |form|}}
@@ -278,20 +329,27 @@ module('Integration | Component | paper form', function(hooks) {
       {{/paper-form}}
     `);
 
-    assert.dom('.paper-input')
+    assert
+      .dom('.paper-input')
       .exists({ count: 1 }, 'paper-input component displayed');
   });
 
-  test('yielded form.input can be customized by passing `inputComponent`', async function(assert) {
+  test('yielded form.input can be customized by passing `inputComponent`', async function (assert) {
     assert.expect(2);
 
-    this.owner.register('component:paper-input', Component.extend({
-      classNames: ['paper-input']
-    }));
+    this.owner.register(
+      'component:paper-input',
+      Component.extend({
+        classNames: ['paper-input'],
+      })
+    );
 
-    this.owner.register('component:custom-input', Component.extend({
-      classNames: ['custom-input']
-    }));
+    this.owner.register(
+      'component:custom-input',
+      Component.extend({
+        classNames: ['custom-input'],
+      })
+    );
 
     await render(hbs`
       {{#paper-form inputComponent="custom-input" as |form|}}
@@ -299,18 +357,23 @@ module('Integration | Component | paper form', function(hooks) {
       {{/paper-form}}
     `);
 
-    assert.dom('.paper-input')
+    assert
+      .dom('.paper-input')
       .doesNotExist('paper-input component is not displayed');
-    assert.dom('.custom-input')
+    assert
+      .dom('.custom-input')
       .exists({ count: 1 }, 'custom input-component is displayed');
   });
 
-  test('yielded form.select renders `paper-select`-component', async function(assert) {
+  test('yielded form.select renders `paper-select`-component', async function (assert) {
     assert.expect(1);
 
-    this.owner.register('component:paper-select', Component.extend({
-      classNames: ['paper-select']
-    }));
+    this.owner.register(
+      'component:paper-select',
+      Component.extend({
+        classNames: ['paper-select'],
+      })
+    );
 
     await render(hbs`
       {{#paper-form as |form|}}
@@ -318,20 +381,27 @@ module('Integration | Component | paper form', function(hooks) {
       {{/paper-form}}
     `);
 
-    assert.dom('.paper-select')
+    assert
+      .dom('.paper-select')
       .exists({ count: 1 }, 'paper-select is displayed');
   });
 
-  test('yielded form.select can be customized by passing `selectComponent`', async function(assert) {
+  test('yielded form.select can be customized by passing `selectComponent`', async function (assert) {
     assert.expect(2);
 
-    this.owner.register('component:paper-select', Component.extend({
-      classNames: ['paper-select']
-    }));
+    this.owner.register(
+      'component:paper-select',
+      Component.extend({
+        classNames: ['paper-select'],
+      })
+    );
 
-    this.owner.register('component:custom-select', Component.extend({
-      classNames: ['custom-select']
-    }));
+    this.owner.register(
+      'component:custom-select',
+      Component.extend({
+        classNames: ['custom-select'],
+      })
+    );
 
     await render(hbs`
       {{#paper-form selectComponent="custom-select" as |form|}}
@@ -339,18 +409,23 @@ module('Integration | Component | paper form', function(hooks) {
       {{/paper-form}}
     `);
 
-    assert.dom('.paper-select')
+    assert
+      .dom('.paper-select')
       .doesNotExist('paper-select component is not displayed');
-    assert.dom('.custom-select')
+    assert
+      .dom('.custom-select')
       .exists({ count: 1 }, 'custom select-component is displayed');
   });
 
-  test('yielded form.autocomplete renders `paper-autocomplete`-component', async function(assert) {
+  test('yielded form.autocomplete renders `paper-autocomplete`-component', async function (assert) {
     assert.expect(1);
 
-    this.owner.register('component:paper-autocomplete', Component.extend({
-      classNames: ['paper-autocomplete']
-    }));
+    this.owner.register(
+      'component:paper-autocomplete',
+      Component.extend({
+        classNames: ['paper-autocomplete'],
+      })
+    );
 
     await render(hbs`
       {{#paper-form as |form|}}
@@ -358,20 +433,27 @@ module('Integration | Component | paper form', function(hooks) {
       {{/paper-form}}
     `);
 
-    assert.dom('.paper-autocomplete')
+    assert
+      .dom('.paper-autocomplete')
       .exists({ count: 1 }, 'paper-autocomplete is displayed');
   });
 
-  test('yielded form.autocomplete can be customized by passing `autocompleteComponent`', async function(assert) {
+  test('yielded form.autocomplete can be customized by passing `autocompleteComponent`', async function (assert) {
     assert.expect(2);
 
-    this.owner.register('component:paper-autocomplete', Component.extend({
-      classNames: ['paper-autocomplete']
-    }));
+    this.owner.register(
+      'component:paper-autocomplete',
+      Component.extend({
+        classNames: ['paper-autocomplete'],
+      })
+    );
 
-    this.owner.register('component:custom-autocomplete', Component.extend({
-      classNames: ['custom-autocomplete']
-    }));
+    this.owner.register(
+      'component:custom-autocomplete',
+      Component.extend({
+        classNames: ['custom-autocomplete'],
+      })
+    );
 
     await render(hbs`
       {{#paper-form autocompleteComponent="custom-autocomplete" as |form|}}
@@ -379,9 +461,11 @@ module('Integration | Component | paper form', function(hooks) {
       {{/paper-form}}
     `);
 
-    assert.dom('.paper-autocomplete')
+    assert
+      .dom('.paper-autocomplete')
       .doesNotExist('paper-autocomplete component is not displayed');
-    assert.dom('.custom-autocomplete')
+    assert
+      .dom('.custom-autocomplete')
       .exists({ count: 1 }, 'custom autocomplete-component is displayed');
   });
 });