Getting HTML5 to work in Form with multiple polymer-dart components

匿名 (未验证) 提交于 2019-12-03 09:06:55

问题:

I was reading Seth Ladd's blog at http://blog.sethladd.com/2013/09/forms-http-servers-and-polymer-with-dart.html

Lets say I add another Form component (Form2) repeating Steps 3 and 4, and then import Form2 in Step 5. So Step 5 should look like the code below:

<!DOCTYPE html>  <html>   <head>     <meta charset="utf-8">     <title>Sample app</title>     <link rel="stylesheet" href="parse_form_submit.css">     <link rel="import" href="person_form.html">     <script src="packages/polymer/boot.js"></script>  </head>  <body>    <h1>Forms</h1>  <!-- Due to a bug in polymer, we can't use custom attributes.      See https://code.google.com/p/dart/issues/detail?id=12262      <person-form action="http://localhost:8888/submit"></person-form> -->  <!-- in the meantime -->     <person-form></person-form>     <form-2><form-2>    </body> </html> 

Where should I now put the 'Submit' button - in one of the forms or in the parent into which the forms are imported? In either case, how do I get auto-validation etc by htnl5 when the submit button is clicked? Everything works fine for a single form that contains its own submit button within the tag, but not so when the submit button is placed external to the tag.

Thanks

回答1:

Assuming both person-form and form-2 are encapsulated forms, each will have their own submit button.

I don't think a <form> tag will see into the Shadow DOM to find fields inside of a custom element. So best to think of it like:

my-special-form extends form

That is, create a custom element that is itself a fully encapsulated form.



易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!