将按钮提交转换为图标答案

【问题标题】：Transform a button submit into an icon将按钮提交转换为图标
【发布时间】：2018-05-29 12:51:12
【问题描述】：

我有一个显示给用户的项目列表，我希望他有一个小“按钮”（事实上，我更喜欢一个图标）。为了确保我们不能通过循环删除每个文件，我想要一个表单来删除它。

所以，在我的索引操作中，我按项目创建了一个表单：

/**
 * @Route("/files", name="files")
 * @return \Symfony\Component\HttpFoundation\Response
 */

public function files() {
    $repository = $this->getDoctrine()->getRepository("App:Document");
    $files = $repository->findBy([], ["createdAt" => "DESC"]);

    $forms = [];
    foreach ($files as $file) {
        $forms[$file->getId()] = $this->createForm(DocumentRemoveType::class, $file)->createView();
    }

    return $this->render("admin/files.html.twig", [
        "files" => $files,
        "forms" => $forms
    ]);
}

然后，在我的 twig 视图中，我显示每个表单：

{% for file in files %}
            {# @var file \App\Entity\Document #}
        <tr>
            <th scope="row">{{ file.name }}</th>
            <td>{{ file.createdAt|date("d/m/Y") }}</td>
            <td class="text-center">
                <a href="{{ vich_uploader_asset(file, 'file') }}" target="_blank" title="Télécharger le document"><i class="fa fa-download"></i></a>
                {{ form_start(forms[file.id], {attr: {class: 'my-form-class'} }) }}
                    {{ form_widget(forms[file.id]) }}
                {{ form_end(forms[file.id]) }}
            </td>
        </tr>
 {% endfor %}

然后，这里是 DocumentRemoveType

class DocumentRemoveType extends AbstractType
{
    private $urlGenerator;

    public function __construct(UrlGeneratorInterface $urlGenerator)
    {
        $this->urlGenerator = $urlGenerator;
    }

    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder->add("id", HiddenType::class)
            ->setAction($this->urlGenerator->generate("admin_files_deletion"))
            ->add("removeButton", SubmitType::class);
    }
}

最后，这是删除操作：

/**
 * @Route("/files/delete", name="admin_files_deletion")
 * @param Request $request
 * @return \Symfony\Component\HttpFoundation\RedirectResponse
 */
public function filesDeletion(Request $request) {
    $form = $this->createForm(DocumentRemoveType::class);
    $form->handleRequest($request);

    if ($form->isSubmitted() && $form->isValid()) {
        $manager = $this->getDoctrine()->getManager();
        $file = $manager->find(Document::class, $manager["id"]);

        $manager->remove($file);
        $manager->flush();
    }
    return $this->redirectToRoute('admin_files');
}

老实说，我不确定我是否走的是好路。目前，这可行，但我想要一个小象形图而不是这个丑陋的输入按钮。你知道我应该怎么做吗？

如果您发现代码中有问题，请随时通知我。

【问题讨论】：

您只是在问如何将图标作为按钮？这是一个 HTML/CSS 问题。
不是真的，因为我必须使用 SubmitType，不是吗？
并非如此。不强制使用 SubmitType。事实上，建议在这种情况下使用纯 html
关于上面的代码，这是一个好方法吗？所以，你是说我应该只使用 CSS 来拥有我想要的东西？

标签： php forms symfony symfony4 symfony-3.4

【解决方案1】：

感谢 cmets，我明白我只需要直接在视图中添加按钮即可：

{% for file in files %}
            {# @var file \App\Entity\Document #}
        <tr>
            <th scope="row">{{ file.name }}</th>
            <td>{{ file.createdAt|date("d/m/Y") }}</td>
            <td class="text-center">
                {{ form_start(forms[file.id], { "attr" : { "onsubmit" : "return confirm('Êtes-vous certain de supprimer ce document?');"}}) }}
                    <a href="{{ vich_uploader_asset(file, 'file') }}" target="_blank" title="Télécharger le document"><i class="fa fa-download"></i></a>
                    <button type="submit" class="buttonAsLink"><i class="fa fa-close"></i></button>
                    {{ form_widget(forms[file.id]) }}
                {{ form_end(forms[file.id]) }}
            </td>
        </tr>
        {% endfor %}

然后我删除了表单中的 SubmitType。现在一切正常。

谢谢大家

【讨论】：