理解 zend 中的网格布局

Question

我对在 zend 中设计表单有点困惑。我知道我的表单中有字段 class 并且外观应该在视图中完成。

在几乎是普通的索引视图中html我没有问题，但是在显示我的表单的添加和编辑视图中我在更改外观时遇到问题。

我有一个如下的 viewscript:

 <?php
$title = 'AVB ändern';        
$this->headTitle($title);
?>
<h1><?= $this->escapeHtml($title) ?></h1>
<?php

$id= $form->get('id');
$id->setAttribute('class', 'form-control');
$id->setAttribute('placeholder', 'id');

$avbname= $form->get('avbname');
$avbname->setAttribute('class', 'form-control');
$avbname->setAttribute('placeholder', 'avbname');

$vbedingungen= $form->get('vbedingungen');
$vbedingungen->setAttribute('class', 'form-control');
$vbedingungen->setAttribute('placeholder', 'vbedingungen');

$versichererid= $form->get('versichererid');
$versichererid->setAttribute('class', 'form-control');
$versichererid->setAttribute('placeholder', 'versichererid');

$aktiv= $form->get('aktiv');
$aktiv->setAttribute('class', 'form-control');
$aktiv->setAttribute('placeholder', 'aktiv');

$submit = $form->get('submit');
$submit->setAttribute('class', 'btn btn-primary');


$form->prepare();

echo $this->form()->openTag($form);
?>
<div class="form-group">
    <?= $this->formElement($id) ?>
    <?= $this->formElementErrors()->render($id, ['class' => 'help-block']) ?>
</div>

<div class="form-group">
    <?= $this->formLabel($avbname) ?>
    <?= $this->formElement($avbname) ?>
    <?= $this->formElementErrors()->render($avbname, ['class' => 'help-block']) ?>
</div>

<div class="form-group">
    <?= $this->formLabel($vbedingungen) ?>
    <?= $this->formElement($vbedingungen) ?>
    <?= $this->formElementErrors()->render($vbedingungen, ['class' => 'help-block']) ?>
</div>

<div class="form-group">
    <?= $this->formLabel($versichererid) ?>
    <?= $this->formElement($versichererid) ?>
    <?= $this->formElementErrors()->render($versichererid, ['class' => 'help-block']) ?>
</div>

<div class="form-group">
    <?= $this->formLabel($aktiv) ?>
    <?= $this->formElement($aktiv) ?>
    <?= $this->formElementErrors()->render($aktiv, s['class' => 'help-block']) ?>
</div>

<?php
echo $this->formSubmit($submit);
echo $this->formHidden($form->get('id'));      
$form->setAttribute('action', $this->url('typavb', ['action' => 'edit']));    
echo $this->form()->closeTag();

当然，它会在另一个字段下方显示一个字段。如何连续显示两个字段（带有标签）？我真的很感激一个例子或一个好的教程的提示，它展示了如何使用这个 zend3 概念正确地做到这一点。

在视图中这样做是否合适，或者我需要一个新的 layout.phtml 吗？

Answer 1

要单独打印部分元素，ZF 中预定义了几个函数。您可以在 \Zend\Form\ConfigProvider->getViewHelperConfig() 中找到所有这些，请参阅 here on Github。

在您的情况下，您已经在使用 formLabel、formElement 和 formElementErrors。

如果您有货币之类的东西，这些对于单独使用很方便，您希望用户在其中填写金额并选择货币但只使用一个标签，例如：

$this->formLabel($form->get('amount'));
$this->formElement($form->get('amount'));
$this->formElementErrors($form->get('amount'));
$this->formElement($form->get('currency'));
$this->formElementErrors($form->get('currency'));

整个 "form row" 由以下部分组成：

标签（可选）
元素
ElementErrors（如果在服务器端验证后出现）

因此，在本例中您需要整个 "amount" 位，您可以将上面的内容缩短为：

$this->formRow($form->get('amount'));             // prints all elements for the row
$this->formElement($form->get('currency'));
$this->formElementErrors($form->get('currency'));

如果您仔细查看 'zendframework/zend-form' 的链接 ConfigProvider，您可能会注意到还有一个 form ViewHelper。这可用于一次打印整个表单，如下所示：

文件：添加-foo.phtml

    <?= $this->form($form) ?>

就是这样。它打印整个表格。当然，它使用 ZF 定义的 ViewHelpers，因此也应用了该布局和 classes。

如果您愿意，可以采用该配置并在您自己的项目中覆盖它。

例如，您的问题代码显示您在每一行周围添加了 <div class="form-group"></div>。大概是为了 Bootstrap 4. 要神奇地做到这一点，所以你不需要这样做：

    <div class="form-group">
        <?= $this->formRow($form->get('foo')) ?>
    </div>

我们可以调整formRow ViewHelper。只需按照以下步骤操作：

在您自己的项目中创建一个 FormRow.php，例如module/Foo/src/View/Helper/FormRow.phtml
确保从 ZF 的 FormRow 扩展它并复制原始 (ZF) render 函数，如下所示：

    use Zend\Form\View\Helper\FormRow as ZendFormRow;

    class FormRow extends ZendFormRow
    {
        public function render(ElementInterface $element, $labelPosition = null)
        {
            // its content
        }
    }

我们要添加一个包装器（form-group class div），所以在class中定义它，像这样：

    class FormRow extends ZendFormRow
    {
        protected $inputRow = '<div class="form-group">%s</div>';
        // the other stuff
    }

在 render 函数的底部，您会找到以下代码（在 else 之前）：

    if ($this->renderErrors) {
        $markup .= $elementErrors;
    }

在上面的后面：

    $markup = sprintf(
        $this->inputRow,
        $markup,
    );

注册您的新 ViewHelper，使用与 ZF 相同的别名以覆盖值：

    'view_helpers'    => [
        'aliases'    => [
            'formrow'             => FormRow::class,
            'form_row'            => FormRow::class,
            'formRow'             => FormRow::class,
            'FormRow'             => FormRow::class,
        ],
        'factories'  => [
            FormRow::class           => InvokableFactory::class,
        ],
    ],

完成。

现在，当您执行 $this->form($form) 时，来自 ZendFramework 的 FormElement ViewHelper 将收到您的自定义 formRow ViewHelper，当它的 Factory 执行 ->get('formRow') 时，因为配置被覆盖到你自己。因此，所有行现在都将自动具有周围的 div。

比你要求的多一点，但玩得开心 ;) 我现在要停止逃避工作了 O:)

理解 zend 中的网格布局

understanding grid layout in zend

zend-framework

zend-form

zend-framework3

zend-view