Symfony 4 / Sonata : creare un tipo di campo di…

Vediamo come possiamo créper un tipo di campo personalizzatoé.

Nel nostro esempio, vogliamo un campo che abbia il mêreso che’un tipo di campo MoneyType ma nel quale potremo aggiungere n’qualsiasi suffisso, perché il campo money non’accetta solo le valute.

Tuttavia, nel nostro progetto vogliamo utilizzare chilogrammi, mesi o chilometrièmolto. In breve, un sacco di tipi di datiéPossibile.

Si comincia con créer la nostra classe Tipo :

<?php 
// src/Form/Type/NumberSuffixType.php
namespace App\Form\Type;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\Extension\Core\Type\IntegerType;
use Symfony\Component\Form\Extension\Core\Type\NumberType;
use Symfony\Component\OptionsResolver\Options;
use Symfony\Component\OptionsResolver\OptionsResolver;
use Symfony\Component\Form\FormViewInterface;
use Symfony\Component\Form\FormInterface;
use Symfony\Component\Form\FormTypeInterface;
use Symfony\Component\Form\FormView;

class NumberSuffixType extends AbstractType
{
    public function getParent()
    {
        return NumberType::class;
        //return TextType::class;
    }
    
    public function configureOptions(OptionsResolver $resolver)
    {
    
        $resolver->setDefaults([
            'suffix' => 'suffix',
            'field_options' => [],
        ]);
    
    }
    
    public function buildView(FormView $view, FormInterface $form, array $options)
    {
        $view->vars['field_name']=$form->getName();
        $view->vars['data']=$form->getData();
        $view->vars['suffix']=$options['suffix'];
        $view->vars['type'] = 'number';
        $view->vars['attr']['class'] = 'number_suffix';
    
    }
    
    public function getBlockPrefix()
    {
        return 'number_suffix';
    }
    
    
}

?>

Poi aggiungiamo il nostro template

{# templates/Adminform/number_suffix_type.html.twig #}
{% block number_suffix_widget %}
    {% spaceless %}
       <div class="input-group">
                {{- block('form_widget_simple') -}}
                {% if suffix is not empty %}
                	<span class="input-group-addon"> {{ suffix }}</span>
                {% endif %}
                
            </div>
    {% endspaceless %}
{% endblock %}

Dobbiamo salvare il nostro template

# config/packages/twig.yaml
twig:
    form_themes:
        - 'Admin/form/number_suffix_type.html.twig'

Accessoriamente, si aggiunge una direttiva CSS per rimuovere le flècampo numeroéricco HTML5.
Per farlo, dobbiamoéférichiamare un file css in l’amministratore

sonata_admin:
    assets:
        extra_stylesheets:
            - css/admin.css

E aggiungiamo la nostra direttiva nel nostro file CSS

input[class*="number_suffix"] {
    -moz-appearance: textfield;
}
input[class*="number_suffix"]:hover,
input[class*="number_suffix"]:focus {
    -moz-appearance: number-input;
}

Poi basta di lui’usare così :

            ->add('dureePossible1', NumberSuffixType::class, ['label'=>'Durée possible 1','suffix'=>'Mois','required'   => false])
            ->add('dureePossible2', NumberSuffixType::class, ['label'=>'Durée possible 2','suffix'=>'Mois','required'   => false])
            ->add('dureePossible3', NumberSuffixType::class, ['label'=>'Durée possible 3','suffix'=>'Mois','required'   => false])
            ->add('dureePossible4', NumberSuffixType::class, ['label'=>'Durée possible 4','suffix'=>'Mois','required'   => false])

Questo produce poi un campo come questo

Adattare l’esempio alla versione installata

Gli esempi Symfony e Sonata rimangono legati alle versioni indicate nell’articolo. Symfony 4.x e Symfony 6.2 non sono più supportati: per un progetto attuale, utilizzate un ramo mantenuto e la documentazione corrispondente esattamente alle vostre dipendenze.

php bin/console about
composer show symfony/framework-bundle sonata-project/admin-bundle

Prima di riprendere il codice, controllate le firme, i servizi, le rotte e i template interessati. Aggiungete poi un test funzionale che copra le autorizzazioni, il codice HTTP e il risultato visibile.

Riferimento : versioni di Symfony supportate.