This is a basic component for form fields, from which most other form field components should inherit from.
The important thing that it does, it defines a
concept - a part inside the DOM-structure that actually holds the value (an input) and is being submitted
when the form is submitted. It is needed because very often the presentation (html) of a form field in real-world
application may actually consist of a number of html-elements (thin field + label + hint underneath the field +
error hints all wrapped by a parent
It also introduces some basic form field functionality that is used by all inheriting components. Let's go over all of that one by one.
In its most basic form, a form field dom structure may actually consist of just a single html
<input>, which itself will be the value holder.
FormFieldComponent implements a two-way binding
between the html element's value and component's
attribute. Thus, if user types something into the field, the component's attribute is updated immediately
event. Regardless of the structure of the html for your component, value holder is identified by the
data-component-part="value_holder" attribute attached to the respective element.
Webface will programattically add
to bind the html-element's value to the component's
Normally, in order to bind html attribute, such as
to some component's attribute, you'd need to add
value attribute is a special case: when Webface sees it on
<input> and that input also has
it will bind to the
.value property of that html-element
Publishing the change event
value attribute changes, either through
user input, or programmatically, by calling
change event is published by the component. This is convenient
if your component is a child of some form component which, say, interactively reacts to changes in
its fields and does something in response. For instance, we can imagine such a form component to
show additional fields if user enters
2 in the "number of children"
Resetting the field
A field can be reset to its initial value - the one that was assigned during component initialization.
event will also be published by the component upon a reset.
ATTENTION: initial value is not previous value! If you want to set a previous value,
you can do it by using the
property (note: it's not an attribute, but actual object property) and write something
If you have an element with the
<div data-component-attr="validation_errors_summary" class="errorsSummary"></div>,
then upon running validations with
it will automatically add error messages into that html-element and the corresponding component
validation_errors_summary is declared as an attribute in
There a couple of attributes each
instance (or an instance of its descendant class) is supposed to have.
namewhich corresponds to the
name=""html attribute of the form field. This is obviously useful when you're submitting a form: a browser needs to know field's name in order to send the value to the server.
disabledwhich corresponds to the