The main component for defining forms in afx that extends Neos.Fusion.Form:Component.Form. The prototype is responsible for rendering the actual form.
In addition the form component will also: - Render hidden __referrer fields for the current and parent request to allow Flow to send the request back in case of validation errors. - Render hidden __trustedProperties fields to enable the Flow property-mapping for the submitted values. - Render hidden __csrfToken for all forms that do not use the method post. - Render hidden __identity fields for all fields that are bound to properties of persisted objects. - Render hidden empty fields for checkbox and submit[multiple] fields make sure unselected values are send to the controller.
form: | (Neos.Fusion.Form:Definition.Form) used to populate the form context but is not available via props |
---|---|
form.request: | (ActionRequest, defaults to the the current request) The data the form is bound to. Can contain objects, scalar and nested values. |
form.namespace: | (string, defaults to request.getArgumentNamespace()) The data the form is bound to. Can contain objects, scalar and nested values. |
form.data: | (mixed, defaults to Neos.Fusion:DataStructure) The data the form is bound to. Can contain objects, scalar and nested values. |
form.target: | (string, default to Neos.Fusion:UriBuilder) The target uri the form will be sent to. |
form.method: | (string, default to post) The form method. |
form.encoding: | (string, default to multipart/form-data when form.method == post) The form enctype multipart/form.data is required for file-uploads.:attributes: (string), all props are rendered as attributes to the form tag |
form.enableReferrer: | (bool, defaults to true) Enable the generation of hidden __referrer fields. Can be disabled when the method is get or no flow validation is used |
form.enableTrustedProperties: | (bool, defaults to true) Enable the generation of hidden __trustedProperties fields. Can be disabled when flow property mapping is not in use |
attributes: | (`Neos.Fusion:DataStructure`_) form attributes, will override all automatically rendered ones |
content: | (string, defaults to '') afx content with the form controls |
Example:
afx` <Neos.Fusion.Form:Form form.data.customer={customer} form.data.deliveryAddress={deliveryAddress} form.target.action="submit"> <Neos.Fusion.Form:Component.Field field.name="customer[firstName]" label="First Name"> <Neos.Fusion.Form:Input /> </Neos.Fusion.Form:Component.Field> <Neos.Fusion.Form:Component.Field field.name="customer[lastName]" label="Last Name"> <Neos.Fusion.Form:Input /> </Neos.Fusion.Form:Component.Field> <Neos.Fusion.Form:Component.Field field.name="deliveryAddress[street]" label="Street"> <Neos.Fusion.Form:Input /> </Neos.Fusion.Form:Component.Field> <Neos.Fusion.Form:Component.Field field.name="deliveryAddress[zip]" label="Zip"> <Neos.Fusion.Form:Input /> </Neos.Fusion.Form:Component.Field> <Neos.Fusion.Form:Submit field.value="submit" /> </Neos.Fusion.Form:Form> `
All fields are derived from the abstract prototype Neos.Fusion.Form:Component.Field which defines the following fusion api:
field: | (Neos.Fusion.Form:Definition.Field) used to populate the field context |
---|---|
field.form: | (Form, defaults to form from fusion-context) The form the field is rendered for. Usually defined by a Neos.Fusion.Form:Definition.Form. |
field.field: | (Field, defaults to field) An possible field that may have been predefined in a container. If no name is given the outer field will be reused. |
field.name: | (string) The fieldname, use square bracket syntax for nested properties. |
field.multiple: | (boolean, default = false) Determine whether the field can contain multiple values like checkboxes or selects. |
field.value: | (any, default = null) The target value of fields (for checkbox, radio and button) |
attributes: | (`Neos.Fusion:DataStructure`_) input attributes, will override all automatically rendered ones |
content: | (string) field content, supported where needed |
The Neos.Fusion.Form:Input component extends the Neos.Fusion.Form:Component.Field and renders an input-tag.
Extends Neos.Fusion.Form:Input and uses the default type text.
Extends Neos.Fusion.Form:Input and uses the default type file.
collectionName: | (string, default = null) name of the resource collection this file should be uploaded to. |
---|
Extends Neos.Fusion.Form:Input and uses the default type password.
Neos.Fusion.Form:Hidden
Extends Neos.Fusion.Form:Input and uses the default type hidden.
Extends Neos.Fusion.Form:Input and uses the default type submit.
Extends Neos.Fusion.Form:Input and uses the default type date and converts the date to string.
Extends Neos.Fusion.Form:Component.Field to render an input of type "checkbox".
Extends Neos.Fusion.Form:Component.Field to render an input of type "radio".
Extends Neos.Fusion.Form:Component.Field to render an textarea tag.
Extends Neos.Fusion.Form:Component.Field and renders a select tag. The options are expected as afx content. If the prototype Neos.Fusion.Form:Select.Option is used for defining the options the selected state is applied automatically by comparing the stringified field.value with option.value.
Render an option tag inside a Neos.Fusion.Form:Select.
option: | (Neos.Fusion.Form:Definition.Option) used to populate the field context |
---|---|
option.value: | (any, default = null) The target value |
attributes: | (string), all props are rendered as attributes to the option tag |
content: | (string) The content of the option tag that is displayed as label. |
Example:
renderer = afx` <Neos.Fusion.Form:Select field.name="user[gender]"> <Neos.Fusion.Form:Select.Option field.value="male">Male</Neos.Fusion.Form:Select.Option> <Neos.Fusion.Form:Select.Option field.value="female">Female</Neos.Fusion.Form:Select.Option> <Neos.Fusion.Form:Select.Option field.value="diverse">Diverse</Neos.Fusion.Form:Select.Option> </Neos.Fusion.Form:Select> `
The field contaimer is a component that renders a label and validation results for the defined field. The actual input elements are passed as afx-content to the container. The container extends Neos.Fusion.Form:Compnent.Field which allows to define a field that will be used by all fields inside that do not have another field.name defined. The container also adjusts the rendering of checkboxes and radio inputs to the needs of the Neos backend.
Do not use this container in frontend projects. It will be modified in the future as the Neos backend evolves. Instead use this prototype as template to create project-specific field containers.
field: | (Neos.Fusion.Form:Definition.Field) used to populate the field context |
---|---|
field.form: | (Form, defaults to form from fusion-context) The form the field is rendered for. Usually defined by a Neos.Fusion.Form:Definition.Form. |
field.field: | (Field, defaults to field) A possible field that may have been predefined in a container. If no name is given the outer field will be reused. |
field.name: | (string) The fieldname, use square bracket syntax for nested properties. |
field.multiple: | (boolean, default = false) Determine wether the field can contain multiple values like checkboxes or selects. |
field.value: | (any, default = null) The target value of fields (for checkbox, radio and button) |
label: | (string) The label for the field, is translated using translation.label.package and translation.label.source |
attributes: | (DataStructure) attributes for the container tag |
class: | (string, default null) class for the container |
errorClass: | (string, default null) class that is added to the container and the error list once errors occur |
labelRenderer: | (string, default "Neos.Fusion.Form:LabelRenderer") Name of the prototype that will render field labels |
errorRenderer: | (string, default "Neos.Fusion.Form:ErrorRenderer") Name of the prototype that will render validation errors |
content: | (string) afx content |
Example:
renderer = afx <Neos.Fusion.Form:FieldContainer field.name="user[firstName]" label="First name"> <Neos.Fusion.Form:Input /> </Neos.Fusion.Form:FieldContainer> `
In some cases multiple inputs are combined in a single FieldContainer:
renderer = afx <Neos.Fusion.Form:FieldContainer field.name="user[roles]" label="user.role" field.multiple> <Neos.Fusion.Form:Checkbox field.value="Neos.Neos:RestrictedEditor" >Restricted Editor</Neos.Fusion.Form:Checkbox> <Neos.Fusion.Form:Checkbox field.value="Neos.Neos:Editor" >Editor</Neos.Fusion.Form:Checkbox> <Neos.Fusion.Form:Checkbox field.value="Neos.Neos:Administrator" >Administrator</Neos.Fusion.Form:Checkbox> </Neos.Fusion.Form:FieldContainer> `
For adding translations or customizing the rendering the renderer can be overwritten:
prototype(Vendor.Site:Form.FieldContainer) < prototype(Neos.Fusion.Form:FieldContainer) { renderer > renderer = afx` <div> <label>{props.label}</label> {props.content} </div> ` }
The LabelRenderer renderer renders a label tag with.
for: | (string, defaults to null) The for attribute of the label |
---|---|
label: | (string, defaults to null) The content of the label, will be translated via translationPackage and translationSource |
class: | (string, defaults to null) The class attribute of the label |
translationPackage: | (string, defaults to null) Translation package for the label |
translationSource: | (string, defaults to null) Translation source for the label |
The ErrorRenderer will render validation errors of form fields.
result: | (NeosErrorMessagesResult, defaults to null) The validation result that shall be rendered |
---|---|
class: | (string, defaults to 'errors') The class attribute |
translationPackage: | (string, defaults to 'Neos.Flow') Translation package for the errors |
translationSource: | (string, defaults to 'ValidationErrors') Translation source for the errors |
For use in Neos Backend Modules a special component is created that renders a label and validation results for the defined field using the class and html structures for the neos backend. The actual input elements are passed as afx-content to the container. The container extends Neos.Fusion.Form:Compnent.Field which allows to define a field that will be used by all fields inside that do not have another field.name defined. The container also adjusts the rendering of checkboxes and radio inputs to the needs of the Neos backend.
field: | (Neos.Fusion.Form:Definition.Field) used to populate the field context |
---|---|
field.form: | (Form, defaults to form from fusion-context) The form the field is rendered for. Usually defined by a Neos.Fusion.Form:Definition.Form. |
field.field: | (Field, defaults to field) An possible field that may have been predefined in a container. If no name is given the outer field will be reused. |
field.name: | (string) The fieldname, use square bracket syntax for nested properties. |
field.multiple: | (boolean, default = false) Determine wether the field can contain multiple values like checkboxes or selects. |
field.value: | (any, default = null) The target value of fields (for checkbox, radio and button) |
label: | (string) The label for the field, is translated using translation.label.package and translation.label.source |
translation: | (array, default {label: {package: 'Neos.Neos', source: 'Modules'}, error: {package: 'Neos.Flow', source: 'ValidationErrors'}}) the translation sources for rendering the labels and errors |
attributes: | (DataStructure) attributes for the container tag |
content: | (string) afx content |
Example:
renderer = afx <Neos.Fusion.Form:Neos.BackendModule.FieldContainer field.name="user[firstName]" label="user.firstName"> <Neos.Fusion.Form:Input /> </Neos.Fusion.Form:Neos.BackendModule.FieldContainer> `
In some cases multiple inputs are combined in a single FieldContainer:
renderer = afx <Neos.Fusion.Form:Neos.BackendModule.FieldContainer field.name="user[roles]" label="user.role" multiple> <Neos.Fusion.Form:Checkbox field.value="Neos.Neos:RestrictedEditor" >Restricted Editor</Neos.Fusion.Form:Checkbox> <Neos.Fusion.Form:Checkbox field.value="Neos.Neos:Editor" >Editor</Neos.Fusion.Form:Checkbox> <Neos.Fusion.Form:Checkbox field.value="Neos.Neos:Administrator" >Administrator</Neos.Fusion.Form:Checkbox> </Neos.Fusion.Form:Neos.BackendModule.FieldContainer> `
The abstract prototypes in Neos.Fusion.Form:Component instantiate the respective domain object and populate the form, field or option context. The renderer is not defined this is done by derived prototypes in the Neos.Fusion.Form or custom namspaces.
The Form component is a base prototype for rendering forms in afx. The prototype populates the form context variable that is available to all the fusion that is rendered as content.
form: | (Neos.Fusion.Form:Definition.Form) used to populate the form context but is not available via props |
---|---|
form.request: | (ActionRequest, defaults to the the current request) The data the form is bound to. Can contain objects, scalar and nested values. |
form.namespacePrefix: | (string, defaults to request.getArgumentNamespace()) The data the form is bound to. Can contain objects, scalar and nested values. |
form.data: | (mixed, defaults to Neos.Fusion:DataStructure) The data the form is bound to. Can contain objects, scalar and nested values. |
form.target: | (string, default to Neos.Fusion:UriBuilder) The target uri the form will be sent to. |
form.method: | (string, default to post) The form method. |
form.encoding: | (string, default to multipart/form-data when form.method == post) The form enctype multipart/form.data is required for file-uploads. |
form.enableReferrer: | (bool, defaults to true) Enable the generation of hidden __referrer fields. Can be disabled when the method is get or no flow validation is used |
form.enableTrustedProperties: | (bool, defaults to true) Enable the generation of hidden __trustedProperties fields. Can be disabled when flow property mapping is not in use |
attributes: | (`Neos.Fusion:DataStructure`_) form attributes, will override all automatically rendered ones |
content: | (string) form content, supported where needed |
The FormComponent does not define any rendering and extended props like name or class. It is up to derived prototypes like Neos.Fusion.Form:Form to implement the renderer.
The field component is a base prototype for creating input rendering prototypes for a given fieldname. The prototype populates the field context variable and establishes the connection to the parent form for data-binding and error rendering.
field: | (Neos.Fusion.Form:Definition.Field) used to populate the field context |
---|---|
field.form: | (Form, defaults to form from fusion-context) The form the field is rendered for. Usually defined by a Neos.Fusion.Form:Definition.Form. |
field.field: | (Field, defaults to field) An possible field that may have been predefined in a container. If no name is given the outer field will be reused. |
field.name: | (string) The fieldname, use square bracket syntax for nested properties. |
field.multiple: | (boolean, default = false) Determine wether the field can contain multiple values like checkboxes or selects. |
field.value: | (any, default = null) The target value of fields (for checkbox, radio and button) |
attributes: | (`Neos.Fusion:DataStructure`_) input attributes, will override all automatically rendered ones |
content: | (string) field content, supported where needed |
The field component is a base prototype for creating input rendering prototypes for a given fieldname. The prototype populates the field context variable and establishes the connection to the parent form for data-binding and error rendering.
option: | (Neos.Fusion.Form:Definition.Option) used to populate the field context |
---|---|
attributes: | (`Neos.Fusion:DataStructure`_) input attributes, will override all automatically rendered ones |
content: | (string) field content, supported where needed |
The prototype will instantiate and return a `Neos\Fusion\Form\Domain\Form`_ object which allows to access the form informations via methods exposed to eel. Usually the regturned object will be put into the form context by the Neos.Fusion.Form:Component.Form prototype.
request: | (ActionRequest, defaults to the the current request) The data the form is bound to. Can contain objects, scalar and nested values. |
---|---|
namespacePrefix: | (string, defaults to request.getArgumentNamespace()) The data the form is bound to. Can contain objects, scalar and nested values. |
data: | (mixed, defaults to Neos.Fusion:DataStructure) The data the form is bound to. Can contain objects, scalar and nested values. |
target: | (string, default to Neos.Fusion:UriBuilder) The target uri the form will be sent to. |
method: | (string, default to post) The form method. |
encoding: | (string, default to multipart/form-data when form.method == post) The form enctype multipart/form.data is required for file-uploads. |
enableReferrer: | (bool, defaults to true) Enable the generation of hidden __referrer fields. Can be disabled when the method is get or no flow validation is used |
enableTrustedProperties: | (bool, defaults to true) Enable the generation of hidden __trustedProperties fields. Can be disabled when flow property mapping is not in use |
The prototype will instantiate and return a `Neos\Fusion\Form\Domain\Field`_ object which allows to access the field informations via methods exposed to eel. Usually the result will be put into the field context by the Neos.Fusion.Form:Component.Field prototype.
form: | (Form, defaults to form from fusion-context) The form the field is rendered for. Usually defined by a Neos.Fusion.Form:Definition.Form. |
---|---|
field: | (Field, defaults to null) An possible field that may have been predefined in a container. If no name is given the oputer field will be reused. |
name: | (string) The fieldname, use square bracket syntax for nested properties. |
multiple: | (boolean, default = false) Determine wether the field can contain multiple values like checkboxes or selects. |
value: | (any, default = null) The target value of fields (for checkbox, radio and button) |
The prototype will instantiate and return a `Neos\Fusion\Form\Domain\Option`_ object which allows to access the option informations via methods exposed to eel. Usually the result will be put into the option context by the Neos.Fusion.Form:Component.Option prototype.
value: | (any, default = null) The target value |
---|