Discussion :

[mickasou]

Salut à tous,

J'ai créé un formulaire très basique que j'ai envoyé à twig. Sur Firefox tout mes champs sont visibles et lorsque je remplis le formulaire et le valide, j'ai bien mon annonce qui s'ajoute dans ma BDD, mais avec Chrome je rencontre un problème.

Tout d'abord, seul mon champ image n'est pas affiché. Il m'affiche le label et pas le input. Ensuite si je remplis le formulaire et que je le valide ( sans remplir le champ image forcément...) j'ai dans ma console cette erreur :

An invalid form control with name='ad[image]' is not focusable.

Voici mon formType:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?php
 
namespace App\Form;
 
use App\Entity\Ad;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\TextareaType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
 
class AdType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('title', TextType::class)
            ->add('description',TextareaType::class)
            ->add('city',TextType::class)
            ->add('image',TextType::class);
 
    }
 
    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults([
            'data_class' => Ad::class,
        ]);
    }
}

mon Controller:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
/**
 * Allow to create an Ad
 *@Route("/profile/ajouter-annonce", name="add_ad")
 * @param Request $request
 * @param EntityManagerInterface $manager
 * @return Response
 */
public function addAd(Request $request, EntityManagerInterface $manager)
{
    $ad = new Ad();
    $form = $this->createForm(AdType::class, $ad);
    $form->handleRequest($request);
 
    if ($form->isSubmitted() && $form->isValid()){
        $ad->setUser($this->getUser());
        $manager->persist($ad);
        $manager->flush();
 
        $this->addFlash('success', 'Votre annonce a bien été ajouté');
        return $this->redirectToRoute('user_ads');
    }
 
    return $this->render('user/addAd.html.twig', [
        'form' => $form->createView(),
    ]);
 
}

et mon Twig :

Code twig :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
{% extends 'base.html.twig' %}
 
{% block body %}
<h1>Ajouter une annonce</h1>
 
{{form_start(form)}}
{{form_widget(form)}}
 
<button type="submit">Ajouter</button>
 
{{form_end(form)}}
 
{% endblock %}

Comme vous le voyez, mon champ image est basique, c'est seulement un TextType, tout comme le "city" ou le "title" mais il ne s'affiche pas sous chrome seulement
rendu sous chrome :



rendu sous Mozilla :



Avez-vous une idée pour gérer ce problème que chrome m'affiche ?

[mickasou]

J'ai oublié de précisé que si je passe mon champ image de TextType à FileType (par exemple) le champ s'affiche et je n'ai pas d'erreur dans la console...

[andry.aime]

Bonjour

Retire cette ligne de ton Twig

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<button type="submit">Ajouter</button>

et utilise un SubmitType dans ta classe de Form.
Et si tu n'as rien n'a personnalisé dans ton formulaire, utilise juste

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

{{form(form)}}

A+.

[mickasou]

Bonjour Andry,

J'ai fais les changements mais j'ai toujours le champ image qui n'apparaît pas. Ça apparaît sous Mozilla et Edge mais pas chrome

[armel18]

bonjour,
Essaie de supprimer la validation html 5:

Code twig :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% extends 'base.html.twig' %}
 
{% block body %}
<h1>Ajouter une annonce</h1>
 
{{ form_start(form, {attr: {'novalidate': 'novalidate'}}) }}
 
{{form_widget(form)}}
 
<button type="submit">Ajouter</button>
 
{{form_end(form)}}
 
{% endblock %}

[mickasou]

Bonjour armel,

Ça ne change rien. C'est seulement sur mon champ image que ça n'apparaît pas ( et seulement sur Chrome) alors que mon champ city et title sont aussi en TextType....