This class is for the "business object". It is bound to the form, so we make its fields observable.

Step 3: Create the custom element HTML





This custom element, brought to you by Polymer.dart, wraps the form and makes it easy to reuse. The <template> tag contains the structure of this custom element. The submit event runs the doSubmit() method of this custom component (see in the next step).





A Dart class, linked by the <script> tag, backs this custom element.





<!DOCTYPE html> <polymer-element name="person-form" attributes="action"> <template> <div id="message"></div> <form method="post" on-submit="{{doSubmit}}"> <div> First name: <input type="text" value="{{person.firstName}}" name="firstName"> </div> <div> Last name: <input type="text" value="{{person.lastName}}" name="lastName"> </div> <div> Age: <input type="number" value="{{person.age | asInteger}}" name="age"> </div> <div> <input type="submit"> </div> </form> </template> <script type="application/dart" src="person_form.dart"></script> </polymer-element>



