如何在EasyAdmin 3中通过configureFields配置实现Bootstrap input-groups功能

实现方案 #

完全可以不用自定义Twig模板，直接在configureFields方法中通过配置表单选项实现Bootstrap input-groups效果，EasyAdmin默认使用的Bootstrap表单主题原生支持该配置。

你需要的邮箱后缀效果可以直接用以下配置实现：

$emailFields = TextField::new('email')
    ->setFormTypeOption("attr.maxlength", 100);

if($pageName==Crud::PAGE_EDIT || $pageName==Crud::PAGE_NEW){
    $tagFields
        ->setFormTypeOption("attr.class", 'check-field')
        ->setFormTypeOption("attr.style", "text-transform:uppercase");

    // input-group 配置代码
    $emailFields
        // 给表单行添加input-group基础类
        ->setFormTypeOption('row_attr.class', 'input-group')
        // 配置input的后缀内容
        ->setFormTypeOption('suffix', '@example.com');
}

如果你需要添加前缀，把suffix换成prefix选项即可，还可以通过suffix_attr/prefix_attr配置前后缀的自定义属性、样式：

// 示例：给后缀添加自定义样式
->setFormTypeOption('suffix_attr.class', 'bg-light text-secondary')

配置完成后渲染出来的效果和你预期的input-groups示例完全一致。

内容的提问来源于stack exchange，提问作者Jaime Roman