README

在填写表单时控制Neos Fusion Form元素的可见性。

显示条件确保只有在配置的条件满足时才显示元素。可以用于此目的的JavaScript子集（networkteam/eel）。可以使用元素标识符引用表单值。

安装

通过composer需要安装的包。

composer require networkteam/fusionform-displaycondition

先决条件

要在表单中使用显示条件，必须满足以下先决条件

• CSS类dynamic-form必须应用于<form>标签
• <form>标签必须有一个以表单命名空间为值的id属性
• 为加载样式表和JavaScript添加到Neos.Neos:Page的标签

此包已经通过扩展Neos.Fusion.Form:Form和Neos.Neos:Page来实现这一点。

用法

为要交互的表单控件添加id

要在表单中动态显示或隐藏元素（基于输入的表单值），必须为要交互的控件设置一个id。该id用作显示条件表达式中的变量名。

添加包含显示条件表达式的数据属性

您想要通过条件控制的任何表单组件都必须具有data-display-condition属性。值是一个Javascript EEL表达式。

使用提供的辅助工具（Networkteam.FusionForm.DisplayCondition:Helper.DisplayConditionAugmenter）将所需的数据属性添加到您的组件中。

示例

// Extend FieldContainer
prototype(Neos.Fusion.Form:FieldContainer) {

    // introduce property for holding display condition expression
    displayCondition = ''

    // use augmenter to add `data-display-condition` attribute to tag
    renderer.@process.addDisplayCondition = Networkteam.FusionForm.DisplayCondition:Helper.DisplayConditionAugmenter {
        @context.displayCondition = ${props.displayCondition}
    }
}

prototype(Vendor.Site:Content.SingleStepFormExample) < prototype(Neos.Fusion.Form:Runtime.RuntimeForm) {

    // set context variable to enable usage of display conditions. When set to `false` no display condition related
    // attribute will be renderd
    @context.displayConditionEnabled = true

    namespace = "single_step_form_example"

    process {

        content = afx`
            <Neos.Fusion.Form:FieldContainer field.name="firstName" label="First Name">
                <Neos.Fusion.Form:Input />
            </Neos.Fusion.Form:FieldContainer>
            <Neos.Fusion.Form:FieldContainer field.name="lastName" label="Last Name">
                <Neos.Fusion.Form:Input />
            </Neos.Fusion.Form:FieldContainer>

<!-- show picture field only, if firstName and lastName has been filled out -->

            <Neos.Fusion.Form:FieldContainer field.name="picture" label="Picture" displayCondition="firstName && lastName">
                <Neos.Fusion.Form:Upload />
            </Neos.Fusion.Form:FieldContainer>

            <Neos.Fusion.Form:FieldContainer field.name="birthDate" label="BirthDate">
                <Neos.Fusion.Form:Date />
            </Neos.Fusion.Form:FieldContainer>
            <Neos.Fusion.Form:FieldContainer field.name="sports" field.multiple label="Sports">
                <Neos.Fusion.Form:Select>
                    <Neos.Fusion.Form:Select.Option option.value="climbing" />
                    <Neos.Fusion.Form:Select.Option option.value="biking" />
                    <Neos.Fusion.Form:Select.Option option.value="hiking" />
                    <Neos.Fusion.Form:Select.Option option.value="swimming" />
                    <Neos.Fusion.Form:Select.Option option.value="running" />
                </Neos.Fusion.Form:Select>
            </Neos.Fusion.Form:FieldContainer>
        `

        schema {
            firstName = ${Form.Schema.string().isRequired()}
            lastName = ${Form.Schema.string().isRequired().validator('StringLength', {minimum: 6, maximum: 12})}
            picture = ${Form.Schema.resource().isRequired().validator('Neos\Fusion\Form\Runtime\Validation\Validator\FileTypeValidator', {allowedExtensions:['txt', 'jpg']})}
            birthDate =  ${Form.Schema.date().isRequired()}
            sports = ${Form.Schema.arrayOf( Form.Schema.string() ).validator('Count', {minimum: 1, maximum: 2})}
        }
    }

    action {
        message {
            type = 'Neos.Fusion.Form.Runtime:Message'
            options.message = afx`<h1>Thank you {data.firstName} {data.lastName}</h1>`
        }
        email {
            type = 'Neos.Fusion.Form.Runtime:Email'
            options {
                senderAddress = ${q(node).property('mailFrom')}
                recipientAddress = ${q(node).property('mailTo')}
                subject = ${q(node).property('mailSubject')}
                text = afx`Thank you {data.firstName} {data.lastName}`
                html = afx`<h1>Thank you {data.firstName} {data.lastName}</h1>`
                attachments {
                    upload = ${data.picture}
                }
            }
        }
    }
}

// Code is taken from https://github.com/neos/fusion-form/blob/master/Documentation/Examples/SingleStepForm.md

编译JavaScript

JavaScript使用esbuild编译。在CLI上运行以下命令

yarn install
yarn build