✨[amp-form] allow form attributes for form elements outside of amp-form

extensions/amp-form/0.1/amp-form.js

@@ -44,6 +44,7 @@ import {SsrTemplateHelper} from '../../../src/ssr-template-helper';
 import {
  ancestorElementsByTag,
  childElementByAttr,
+ closestAncestorElementBySelector,
  createElementWithAttributes,
  iterateCursor,
  matches,
@@ -1470,6 +1471,23 @@ export function formElementsQuerySelectorAll(form, query) {
  return Array.from(form.elements).filter((element) => matches(element, query));
 }
 
+/**
+ * Returns the first element for the form.elements
+ * that match the selectors.
+ * @param {!HTMLFormElement} form
+ * @param {string} query
+ * @return {?HTMLElement}
+ */
+export function formElementsQuerySelector(form, query) {
+ for (let i = 0; i < form.elements.length; i++) {
+ const element = form.elements[i];
+ if (matches(element, query)) {
+ return element;
+ }
+ }
+ return null;
+}
+
 /**
  * Checks user validity for all inputs, fieldsets and the form.
  * @param {!HTMLFormElement} form
@@ -1729,10 +1747,21 @@ export class AmpFormService {
  this.ampdoc_.getRootNode(),
  type,
  (e) => {
- const {form} = e.target;
+ let {form} = e.target;
+
+ // If it's an AMP element that does not have a native form attribute,
+ // then find the form by either querySelector for based upon 'form'
+ // attribute on the element or traversing up.
+ if (!form) {
+ dev.assertElement(e.target);
+ const formId = e.target.getAttribute('form');
+ form = formId
+ ? this.ampdoc_.getRootNode().querySelector(formId)
+ : closestAncestorElementBySelector(e.target, 'form');
+ }
 
  // Only call handlers if the element has a registered form.
- if (this.eventHandlers_[type].has(form)) {
+ if (form && this.eventHandlers_[type].has(form)) {
  this.eventHandlers_[type].get(form).forEach((handlerForForm) => {
  handlerForForm(e);
  });

extensions/amp-form/0.1/form-verifiers.js

@@ -15,8 +15,9 @@
  */
 
 import {LastAddedResolver} from '../../../src/core/data-structures/promise';
+import {formElementsQuerySelector} from './amp-form.js';
 import {isFieldDefault} from '../../../src/form';
-import {iterateCursor, matches} from '../../../src/dom';
+import {iterateCursor} from '../../../src/dom';
 import {user} from '../../../src/log';
 
 export const FORM_VERIFY_PARAM = '__amp_form_verify';
@@ -272,20 +273,3 @@ function getResponseErrorData_(error) {
  () => []
  );
 }
-
-/**
- * Returns the first element for the form.elements that
- * that match the selectors.
- * @param {!HTMLFormElement} form
- * @param {string} query
- * @return {?HTMLElement}
- */
-function formElementsQuerySelector(form, query) {
- for (let i = 0; i < form.elements.length; i++) {
- const element = form.elements[i];
- if (matches(element, query)) {
- return element;
- }
- }
- return null;
-}

extensions/amp-form/0.1/test/integration/test-integration-form.js

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import * as Service from '../../../../../src/service';
 import {AmpEvents} from '../../../../../src/core/constants/amp-events';
 import {AmpForm, AmpFormService} from '../../amp-form';
 import {AmpMustache} from '../../../../amp-mustache/0.1/amp-mustache';
@@ -34,12 +35,14 @@ describes.realWin(
  runtimeOn: true,
  ampdoc: 'single',
  },
+ extensions: ['amp-form'], // amp-form is installed as service.
  mockFetch: false,
  },
  (env) => {
  const {testServerPort} = window.ampTestRuntimeConfig;
  const baseUrl = `http://localhost:${testServerPort || '9876'}`;
  let doc;
+ let ampFormService;
 
  const realSetTimeout = window.setTimeout;
  const stubSetTimeout = (callback, delay) => {
@@ -74,7 +77,17 @@ describes.realWin(
 
  stubElementsForDoc(env.ampdoc);
 
- new AmpFormService(env.ampdoc);
+ ampFormService = new AmpFormService(env.ampdoc);
+ const originalGetServiceForDocOrNull = Service.getServiceForDocOrNull;
+
+ env.sandbox
+ .stub(Service, 'getServiceForDocOrNull')
+ .callsFake((ampdoc, id) => {
+ if (id === 'amp-form') {
+ return ampFormService;
+ }
+ return originalGetServiceForDocOrNull(ampdoc, id);
+ });
 
  // Wait for submit listener to be installed before starting tests.
  return installGlobalSubmitListenerForDoc(env.ampdoc);

extensions/amp-form/0.1/test/test-form-dirtiness.js

@@ -15,7 +15,6 @@
  */
 
 import {AmpEvents} from '../../../../src/core/constants/amp-events';
-import {AmpFormService} from '../amp-form';
 import {DIRTINESS_INDICATOR_CLASS, FormDirtiness} from '../form-dirtiness';
 import {Services} from '../../../../src/services';
 import {closestAncestorElementBySelector} from '../../../../src/dom';
@@ -94,7 +93,7 @@ describes.realWin(
  },
  },
  (env) => {
- let doc, form, dirtinessHandler, ampFormService;
+ let doc, form, dirtinessHandler;
 
  beforeEach(async () => {
  doc = env.win.document;
@@ -104,7 +103,6 @@ describes.realWin(
  return false;
  },
  });
- ampFormService = new AmpFormService(env.ampdoc);
  dirtinessHandler = new FormDirtiness(form, env.win);
  await macroTask();
  });
@@ -478,16 +476,14 @@ describes.realWin(
 
  it('adds the dirtiness class if the form already has dirty fields', async () => {
  changeInput(input, 'changed');
- ampFormService = new AmpFormService(env.ampdoc);
- dirtinessHandler = new FormDirtiness(newForm, env.win, ampFormService);
+ dirtinessHandler = new FormDirtiness(newForm, env.win);
  await macroTask();
 
  expect(newForm).to.have.class(DIRTINESS_INDICATOR_CLASS);
  });
 
  it('does not add the dirtiness class if the form does not have dirty fields', async () => {
- ampFormService = new AmpFormService(env.ampdoc);
- dirtinessHandler = new FormDirtiness(newForm, env.win, ampFormService);
+ dirtinessHandler = new FormDirtiness(newForm, env.win);
  await macroTask();
 
  expect(newForm).to.not.have.class(DIRTINESS_INDICATOR_CLASS);