In order to customize the views of the new user page, I need to remove the elements {{ form_start(form) }} and {{ form_end(form) }} from my twig template new.html.twig. It lets the page unorganized. Unfortunately, when I delete it, the insert new user don't display.
here is my twig code new.html.twig :
<div class="content">
{{ form_start(form) }}
<form class="form-horizontal group-border-dashed" action="#" style="border-radius: 0px;">
<div class="form-group">
<label class="col-sm-3 control-label">
Username
</label>
<div class="col-sm-6">
{{ form_widget(form.username, { 'attr': {'class': 'form-control','placeholder':'Username'}} ) }}
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">
EMAIL
</label>
<div class="col-sm-6">
{{ form_widget(form.email, { 'attr': {'class': 'form-control','placeholder':'EMAIL '}} ) }}
</div>
</div>
<--! and so on -->
{{ form_widget(form) }}
<input type="submit" value="Create" />
{{ form_end(form) }}
<ul>
<li>
Back to the list
</li>
</ul>
</form>
</div>
Is there a way to remove the form_start and form_end from my twig
have you consider using the options of form_start?
like this :
form_start(form, 'attr':{ 'class':'form-horizontal group-border-dashed', 'style': 'border-radius: 0px;'})
you'll be able to remove the <form> but keep a concitent templating
note that the style should'nt be in your html page but in your css file. If you're using bootstrap you have access to this :
<span class="rounded-0"></span>
PS : if you fully template your form, you won't have access to the individual errors of each form that are autogenerated by symfony. read this page for more info.
post edit
I have edited your question to see it more clearly and new questions arised.
why are you using the form_widget(form) if you create all the element by yourself ?
you forgot the form_rest(form)that create the hidden csrf token (essential for security) and finnaly if you want to keep your <ul> inside the form why closing the form with form_end(form) before ?
Related
I have a form and inside this one I added another form.
The second form is working good but the second is not working.
There is the form part in my Twig template
<div>
{{ form_start(registrationForm) }}
<div>
{{ form_label(registrationForm.name, 'name') }}
{{ form_widget(registrationForm.name) }}
</div>
<div>
...
</div>
<div>
<div>
<a>Change password</a>
<!-- Modal -->
<div>
{{ form_start(passwordForm) }}
{{ form_label(passwordForm.password, 'change password') }}
{{ form_widget(passwordForm.password) }}
<div>
<button type="submit">Save</button>
</div>
{{ form_end(passwordForm) }}
</div>
</div>
</div>
<div>
{{ form_label(registrationForm.email, 'email') }}
{{ form_widget(registrationForm.email) }}
</div>
<div>
<div>
<button type="submit">Save changes</button>
</div>
</div>
{{ form_end(registrationForm) }}
So the passwordForm is working (the button submits it) but the registration form submit button doesn't work anymore. Does anyone have an idea about how to resolve this issue? Thanks!
EDIT:
Fixed this issue by taking out the passwordForm and putting it after the registerationForm. In my case, the position doesn't matter because it's a modal which appears when the button is clicked.
i'm using Symfony 3.3.9 and when I'm trying to render a form I have the following error:
An exception has been thrown during the rendering of a template
("Unable to render the form because the block names array contains
duplicates: "_fos_user_registration_form_errors", "user_errors",
"user_errors", "fos_user_registration_errors", "form_errors".").
Thank you in advance for your help !
EDIT 17/09/2017
Here you go:
public function indexAction()
{
/** #var $formFactory FactoryInterface */
$formFactory = $this->get('fos_user.registration.form.factory');
$form = $formFactory->createForm();
return $this->render('AppTMMainBundle:Default:index.html.twig', array(
'form' => $form->createView(),
));
}
My Twig:
{{ form_start(form, {'method': 'post', 'action': path('fos_user_registration_register')}) }}
<div class="card-content">
<h3 class="text-center title" style="color: #3C4858;margin:10px 0;">Inscription</h3>
<div class="social text-center">
<a class="btn btn-just-icon btn-round btn-facebook" href="{{ path('hwi_oauth_service_redirect',{'service': 'facebook'}) }}">
<i class="fa fa-facebook"> </i>
</a>
<a class="btn btn-just-icon btn-round btn-twitter" href="{{ path('hwi_oauth_service_redirect',{'service': 'twitter'}) }}">
<i class="fa fa-twitter"></i>
</a>
<a class="btn btn-just-icon btn-round btn-google" href="{{ path('hwi_oauth_service_redirect',{'service': 'google'}) }}">
<i class="fa fa-google-plus"></i>
</a>
</div>
<p class="description text-center">Ou de façon plus classique</p>
<div class="row">
<div class="col-xs-6">
{{ form_label(form.firstname) }}
{{ form_widget(form.firstname) }}
</div>
<div class="col-xs-6">
{{ form_label(form.lastname) }}
{{ form_widget(form.lastname) }}
</div>
</div>
<div class="row">
<div class="col-xs-12">
{{ form_label(form.email) }}
{{ form_widget(form.email) }}
</div>
</div>
<div class="row">
<div class="col-xs-6">
{{ form_widget(form.plainPassword.first, {'attr': {'class': 'form-control', 'placeholder': 'form.password'}}) }}
</div>
<div class="col-xs-6">
{{ form_widget(form.plainPassword.second, {'attr': {'class': 'form-control', 'placeholder': 'form.password_confirmation'}}) }}
</div>
</div>
<!-- If you want to add a checkbox to this form, uncomment this code -->
<div class="input-group">
<div class="checkbox">
<label>
<input type="checkbox" name="optionsCheckboxes" checked="">
{{ 'index.proceed.agree'|trans }} {{ 'index.proceed.cgu'|trans }}.
</label>
</div>
</div>
<div class="footer text-center">
<input type="submit" class="btn btn-primary btn-round" value="{{ 'index.action.subscribe'|trans }}">
</div>
</div>
{{ form_end(form) }}
for anyone having such an exception:
You probably shouldn't extend a form type, but instead create your own and use getParent to inherit the behaviour.
And if your class name is the same as an other type (excluding namespaces)
you must override the getBlockPrefix from AbstractType.
The getBlockPrefix method from AbstractType uses the last part of fqcn (the class name) and you could have a duplicate block name.
I found the answer to my question.
That was from my RegistrationType class where I was trying to extends with another Type Class. getParent not working as well expected...
RegistrationType > UserType > FOS\UserBundle\Form\Type\RegistrationFormType
I move all fields from UserType in RegistrationType and it's working :)
I'm trying to apply bootstrap in data-prototype but it is not working.
Below is my twig file
{% block body %}
<div class="container">
<div class="page-header">
<h2>New Company</h2>
</div>
{{ form_start(form) }}
<div class="row">
{{ form_row(form.name) }}
<h3>Employees</h3>
<ul class="employees" data-prototype="{{ form_widget(form.employees.vars.prototype)|e('html_attr') }}">
{% for employee in form.employees %}
<li>
<div class="form-group col-sm-6">
{{ form_row(employee.firstName, {'attr':{'class': 'form-control'}}) }}
</div>
<div class="form-group col-sm-6">
{{ form_row(employee.lastName, {'attr':{'class': 'form-control'}}) }}
</div>
</li>
{% endfor %}
</ul>
<button type="submit" class="btn btn-primary">Save</button>
</div>
{{ form_end(form) }}
</div>
{% endblock %}
Button type is okay but the employee.firstName and employee.lastName are not.
You should create a dedicated form theme for your collection type.
Example:
EmployeeCollectionTypeTheme.html.twig
{% block EmployeeCollectionType_widget %}
<li>
<div class="form-group col-sm-6">
{{ form_row(form.firstName, {'attr':{'class': 'form-control'}}) }}
</div>
<div class="form-group col-sm-6">
{{ form_row(form.lastName, {'attr':{'class': 'form-control'}}) }}
</div>
</li>
{% endblock %}
main.html.twig
{% form_theme form.employees 'AppBundle:Default:EmployeeCollectionTypeTheme.html.twig' %}
<ul class="employees" data-prototype="{{ form_widget(form.employees.vars.prototype)|e('html_attr') }}">
{{ form_widget(form.employees) }}
</ul>
Of course, change form type name to fit with yours (except the form variable in the theme, which is given in the prototype context).
To get further, you can check how I built the collection type for templates in https://twigfiddle.com/ (where you have "Add template" in the left pane), by looking at the theme source code.
I am currently trying to style a form that is generated by symfony form builder.
there is a bootstrap overlay on it but i want to move the time widgets so they align next to each other.
You can display each input of your form independently using
form_row(form.yourinputname)
form_row is the combination of the field's label, errors and widget.
You can see the doc about this
EDIT:
So if you want to display some widgets in one line you can do this (you have to use a loop to display each input of your form collection) :
<style type="text/css">
.myClass{
.inline{
display: inline-block;
}
}
</style>
<div class='myClass'>
{% for business in form.businesshours %}
<div class="inline">{{ form_row(business.day) }}</div>
<div class="inline">{{ form_row(business.openTime) }}</div>
<div class="inline">{{ form_row(business.breakStart) }}</div>
<div class="inline">{{ form_row(business.breakEnd) }}</div>
<div class="inline">{{ form_row(business.closeTime) }}</div>
{% endfor %}
</div>
http://symfony.com/doc/current/form/form_customization.html#how-to-customize-an-individual-field
In this section there is a part to override the display of a single row, if you were to try something similar and give the div a class of your own you would probably be able to use css to style it.
This seems to be the page to go to for form styling and customization though.
Hope it helps
{% form_theme form _self %}
{% block _datetime_row %}
<div class="your_class">
{{ form_label(form) }}
{{ form_errors(form) }}
{{ form_widget(form) }}
</div>
{% endblock %}
{{ form_row(form.name) }}
Add HTML to move each form row. (Same answer as #DOZ, but with bootstrap classes).
Remove {{ form_row(form.businessHours) }} and :
<div class="row">
<div class="col-xs-3">
{{ form_row(form.businessHours.Begin) }}
</div>
<div class="col-xs-3">
{{ form_row(form.businessHours.BeginPauze) }}
</div>
<div class="col-xs-3">
{{ form_row(form.businessHours.EindPauze) }}
</div>
<div class="col-xs-3">
{{ form_row(form.businessHours.Einde) }}
</div>
</div>
I am using Symfony version 2.3 and twig version 1.0. and I'm trying to change the name attribut value. Here is my code :
<div class="control-group">
{{ form_label(form.menuTitle, null, {'label_attr': {'class': 'control-label'}}) }}
{{ form_errors(form.menuTitle)}}
<div class="controls">
<div class="span12">
{{ form_widget(form.menuTitle, {'attr': {'class': 'span6'}}) }}
</div>
</div>
</div>
The rendering code :
<div class="control-group">
<label class="control-label required" for="smart_contactbundle_contact_menuTitle">Menu title</label>
<div class="controls">
<div class="span12">
<input type="text" id="smart_contactbundle_contact_menuTitle" name="smart_contactbundle_contact[menuTitle]" required="required" maxlength="255" class="span6">
</div>
</div>
</div>
I want to change name="smart_contactbundle_contact[menuTitle]" to name="menuTitle"
If you do that, there's a good possibility that your form won't submit correctly.
However...
If you really want to do it:
{{ form_widget(form.menuTitle, {'full_name': 'menuTitle'}) }}
Should get you where you want to be.
A full list of available form variables can be found here:
Form Variables Reference