Chapters

41 Chapters | 4:45:40 |

01

Form Type Class

9:11
02

Handling the Form Submit

8:44
03

Success (Flash) Messages

6:50
04

Bind Your Form to a Class

7:32
05

Field Types & Options

4:45
06

DateTimeType & Data "Transforming"

6:25
07

EntityType: Drop-downs from the Database

7:33
08

EntityType: Custom Query

5:27
09

HTML5 & "Sanity" Validation

6:19
10

Validation Constraints with @Assert

5:13
11

Form Rendering Functions: form_*

5:22
12

Form Rendering Variables

5:16
13

The Edit Form

7:18
14

Registration Form

7:15
15

Adding Extra "Unmapped" Fields

6:58
16

UniqueEntity & Validation Directly on Form Fields

6:40
17

Agree to Terms Database Field

6:03
18

Agree to Terms Checkbox Field

5:35
19

All about Form Themes

8:01
20

Form Theme Block Naming & Creating our Theme!

6:22
21

Form Theming & Variables

8:42
22

Form Theming a Single Field

4:07
23

Custom Field Type

6:24
24

Data Transformer

9:09
25

Custom Field: configureOptions() & Allowing Empty Input

4:42
26

Leveraging Custom Field Options

5:35
27

Autocomplete JavaScript

8:19
28

Autocomplete Endpoint & Serialization Group

5:26
29

Hooking up the AJAX Autocomplete

8:20
30

The buildView() Method

7:09
31

Form Type Extension

10:09
32

Tweak your Form based on the Underlying Data

8:35
33

Form Model Classes (DTOs)

9:59
34

Custom Validator

8:59
35

Setup: For Dependent Select Fields

6:41
36

Form Events & Dynamic ChoiceType choices

6:01
37

Dynamic Form Events

7:40
38

PRE_SET_DATA: Data-based Dynamic Fields

4:25
39

JS to Auto-Update the Select Options

10:18
40

Clear that Location Name Data

5:09
41

A bit of Security Cleanup

7:02

This tutorial has a new version, check it out!

> Symfony 4 > Symfony 4 Forms: Build, Render & Conquer!

Buy Access to Course

04.

Bind Your Form to a Class

|

Autoplay

Previous Chapter

Next Chapter

Login or Register to check out the script

16 Comments

Sort By

Login or Register to join the conversation

Giacomo V. 6 years ago edited

Hallo, i can't see the form template.

twig.yaml:

twig:
    default_path: '%kernel.project_dir%/templates'
    form_themes: ['bootstrap_4_layout.html.twig']```


base.html.twig:

<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>{% block title %}Welcome!{% endblock %}</title>
    {% block head_css %}

    {% endblock %}
    {% block head_js %}
        
    {% endblock %}
    {% block stylesheets %}{% endblock %}
</head>
<body>
    {% block body %}
    {% endblock %}
    {% block javascripts %}{% endblock %}
</body>

</html>



new.html.twig:

{% extends 'base.html.twig' %}

{% block body %}

{{ form_start(newGruppo) }}
<h1>Nuovo gruppo</h1>
{{ form_widget(newGruppo) }}
<button type="submit" class="btn btn-primary">Crea</button>
{{ form_end(newGruppo) }}

{% endblock %}



I just can see it if i use <u><b>both</b></u> the form_themes in twig.yaml and edit base.html.twig this way:

<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>{% block title %}Welcome!{% endblock %}</title>
    {% block head_css %}
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    {% endblock %}
    {% block head_js %}
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    {% endblock %}
    {% block stylesheets %}{% endblock %}
</head>
<body>
    {% block body %}
    {% endblock %}
    {% block javascripts %}{% endblock %}
</body>

</html>`

I'm using symfony 5 with my own project (not spacebar).

Any suggestions?

Thanks,

Giacomo.

1 |

Victor SFCASTS Giacomo V. 6 years ago

Hey Giacomo,

> i can't see the form template.

What do you mean exactly? You don't see styles for the bootstrap4 styled form? If so - then yes, you have to include "bootstrap.min.css" css file in order to apply those styles. Symfony form theme gives you only CSS classes, but actual styles should be included on the page by you.

Cheers!

|

Giacomo V. Victor 6 years ago

Thank you!

I included boostrap CDN and that worked!

just out of curiosity, how can use boostrap after install with composer, instead of link che CDN?

|

Victor SFCASTS Giacomo V. 6 years ago

Hey Giacomo,

Fairly speaking I don't know if Bootstrap can be installed with Composer :p Even if it could - you can't just link it from vendor/ dir, you have to copy it to the public/ dir somehow. Usually, there's a special bundles for it like symfony/assetic-bundle: https://github.com/symfony/... - but it was deprecated in favor of brand new WebpackEncoreBundle. You can learn more about Webpack Encore in our course here: https://symfonycasts.com/sc... - this is an amazing tool for your assets with bunch of features.

Cheers!

|

mercelot 4 years ago edited

Hi SymfonyCasts! I have a completely custom form rendered in my twig:


{{ form_start(form) }}
    <div class="mt-3">
    {% for question in question %}
        <input type="hidden" name="response[question][]" value="{{ question.id }}">
        {% set name = 'response[answer]['~ question.id ~']' %}
        {% if question.type == 'checkbox' %}
            {% set name = name ~ '[]' %}
        {% endif %}

        {#    {% if question.replies is defined %}#}
        <div class="mb-3 mt-3 border">
        <h3 class="mb-0" id="question-{{ question.id }}">{{ loop.index }}. {{ question.label }}</h3>
        </div>
        {% if question.type == 'checkbox' or question.type == 'radio' %}
            <div class="answers p-1">
            {% for answer in question.replies %}

                {% set id = 'answer-' ~ answer.id  %}

                <label for="{{ id }}">{{ answer.answer }}</label>
                <input type="{{ question.type }}" name="{{ name }}" id="{{ id }}">
            {% endfor %}
            </div>
        {% elseif question.type == 'textarea' %}
            <textarea name="{{ name }}" aria-labelledby="question-{{ question.id }}" cols="30" rows="5" class="form-control"></textarea>
        {% elseif question.type == 'number' %}
            <input type="number" name="{{ name }}" aria-labelledby="question-{{ question.id }}">
        {% else %}
            <input type="text" name="{{ name }}" aria-labelledby="question-{{ question.id }}" class="form-control">
        {% endif %}
        {#    {% endif %}#}

    {% endfor %}
    </div>

    <button class="btn btn-primary">{{ button_label|default('Submit') }}</button>
{#{{ form_end(form, {render_rest: false }) }}#}
{{ form_end(form) }}

I have no idea on how to submit the form response!

Any help?

|

Victor SFCASTS mercelot 4 years ago edited

Hey Shane,

Ha, good question! :) The button should have type="submit" to be able to submit the form, try to add this special type to your button and browser will know that it should send the form on that button hit, i.e.:


<button type="submit" class="btn btn-primary">{{ button_label|default('Submit') }}</button>

Cheers!

|

Oliver-W 5 years ago edited

Hi,
is there a way to add an "a"-tag, or any other, to the label in the FormType??

[ 'label' => '&lt;a href="#"&gt;....']```
 just prints exactly what I typed in instead of transforming.

Thx
Oliver

|

MolloKhan SFCASTS Oliver-W 5 years ago edited

Hey Oliver W.

By default Twig escapes your strings to avoid any HTML injection, if you really want to print some HTML you need to use the raw filter.
Just do this: [ 'label' => '<a href="#">....']|raw

Docs reference: https://twig.symfony.com/doc/2.x/filters/raw.html

Cheers!

|

Oliver-W MolloKhan 5 years ago edited

Hi MolloKhan

thx for your assistance but I need to do this in my form declaration not in the template!?

For now I made it in the template with a manual <label> combined with {{ form_widget() }} and {{ form_errors() }}. That's more work but I know what to do.

|

MolloKhan SFCASTS Oliver-W 5 years ago edited

That may work but there are other 2 options depending on your needs. If you want to write the HTML inside the FormType class, then you will have to override the label value inside the template so you can use the raw filter. Something like this:


// form_template.html.twig

{{ form_label(form.some_field, null, {
    label: form.some_field.vars.label | raw
}) }}

or, just write the HTML inside the form template and you wouldn't have to use the raw filter

Cheers!

1 |

Jacek 6 years ago edited

Hi, after adding in ArticleFormType:


    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('title')
            ->add('content')
        ;
    }

in ArticleAdminController->new in


$form->handleRequest($request);

when i try to submit form i'm getting error:
<br />The property "App\Entity\Article::$title" is not readable because it is typed "string". You should initialize it or declare a default value instead.<br />

|

Jacek Jacek 6 years ago

ok, I have managed to fixed it. I added previously types to fields in Article Entity and they just needed to be initialized.

|

sadikoff Jacek 6 years ago edited

Hey Jacek

That's great that you fixed it. How do you think is it true that sometimes you can fix anything after asking about it? :) For example I'm always find a way to fix issue, after asking colleague :)))

Cheers!

|

Jacek sadikoff 6 years ago

Yep, it's the rubber duck debugging method :) https://en.wikipedia.org/wi...
Thanks for great tutorial :)

|

Benoit L. 6 years ago edited

Hello, I have a drop down list of EntityType, i want to display a list grouped by family (so using form group) :
` ->add('idEtatMatriceDetails', EntityType::class,[

            'class' => EtatMatriceDetails::class,
            'choice_label' => 'LibelleEtatMatriceDetails',
            'group_by' => function($choice,$key,$val){ // $choice is an instance of EtatMatriceDetails
                switch($choice->getIdEtatMatrice()->getIdEtatMatrice())
                {
                    case 1:
                        return 'FAMILY_ONE';
                        break; 
                    case 2:
                        return 'FAMILY_TWO';
                        break;

....`
under FAMILY_ONE, i can have several options, however, some of these options are disabled (there is a column for that flag), so I want to filter these options, how can I do this in the closure? can I craft a special getter in the entity that filter those values? Thank you

|

Victor SFCASTS Benoit L. 6 years ago

Hey Yvon,

I see you mentioned that $choice in that closure is an instance of EtatMatriceDetails entity, so yes, I think you can create a new method in that entity with the logic and use it inside the closure to group them, or you can do the same logic directly in that closure. Have you tried it? Did you have any problems with this implementation?

Cheers!

|

Symfony 4

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": "^7.1.3",
        "ext-iconv": "*",
        "composer/package-versions-deprecated": "^1.11", // 1.11.99
        "doctrine/annotations": "^1.0", // 1.10.2
        "doctrine/doctrine-bundle": "^1.6.10", // 1.10.2
        "doctrine/doctrine-migrations-bundle": "^1.3|^2.0", // v2.0.0
        "doctrine/orm": "^2.5.11", // v2.7.2
        "knplabs/knp-markdown-bundle": "^1.7", // 1.7.0
        "knplabs/knp-paginator-bundle": "^2.7", // v2.8.0
        "knplabs/knp-time-bundle": "^1.8", // 1.8.0
        "nexylan/slack-bundle": "^2.0,<2.2.0", // v2.0.0
        "php-http/guzzle6-adapter": "^1.1", // v1.1.1
        "phpdocumentor/reflection-docblock": "^3.0|^4.0", // 4.3.0
        "sensio/framework-extra-bundle": "^5.1", // v5.2.1
        "stof/doctrine-extensions-bundle": "^1.3", // v1.3.0
        "symfony/asset": "^4.0", // v4.1.6
        "symfony/cache": "^3.3|^4.0", // v4.1.6
        "symfony/console": "^4.0", // v4.1.6
        "symfony/flex": "^1.0", // v1.21.6
        "symfony/form": "^4.0", // v4.1.6
        "symfony/framework-bundle": "^4.0", // v4.1.6
        "symfony/property-access": "^3.3|^4.0", // v4.1.6
        "symfony/property-info": "^3.3|^4.0", // v4.1.6
        "symfony/security-bundle": "^4.0", // v4.1.6
        "symfony/serializer": "^3.3|^4.0", // v4.1.6
        "symfony/twig-bundle": "^4.0", // v4.1.6
        "symfony/validator": "^4.0", // v4.1.6
        "symfony/web-server-bundle": "^4.0", // v4.1.6
        "symfony/yaml": "^4.0", // v4.1.6
        "twig/extensions": "^1.5" // v1.5.2
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.0", // 3.0.2
        "easycorp/easy-log-handler": "^1.0.2", // v1.0.7
        "fzaninotto/faker": "^1.7", // v1.8.0
        "symfony/debug-bundle": "^3.3|^4.0", // v4.1.6
        "symfony/dotenv": "^4.0", // v4.1.6
        "symfony/maker-bundle": "^1.0", // v1.8.0
        "symfony/monolog-bundle": "^3.0", // v3.3.0
        "symfony/phpunit-bridge": "^3.3|^4.0", // v4.1.6
        "symfony/stopwatch": "^3.3|^4.0", // v4.1.6
        "symfony/var-dumper": "^3.3|^4.0", // v4.1.6
        "symfony/web-profiler-bundle": "^3.3|^4.0" // v4.1.6
    }
}

Previous Chapter

Next Chapter