I am trying to style my input field in Symfony 3.4 with symfony forms for some duration(hours and minutes only). I am trying with clockpicker but I don't know where I am wrong. If someone can help me or there is a better solution. I have downloaded and included my js and css in web folder.
I am trying to make it like this in the moment:
My twig:
<div class="form-group col-md-4">
<label for="time_for_cooking">Време за готвене(минути):</label>
{% if form_errors(form.recipeCookingTime) %}
{{ form_widget(form.recipeCookingTime, { 'attr': {'class': 'form- control clockpicker-control clockpicker is-invalid'} }) }}
<div class="col">
<small class="text-danger">
{{ form_errors(form.recipeCookingTime) }}
</small>
</div>
{% else %}
{{ form_widget(form.recipeCookingTime, { 'attr': {'class': 'form control clockpicker-control clockpicker'} }) }}
{% endif %}
</div>
My RecipeType.php
->add('recipeCookingTime', TimeType::class)
document ready
<script>
$(document).ready(function() {
('.clockpicker').clockpicker();
} );
</script>
and what its generated, I think the problem is these selects that being genereted
In your FormType you have to set the html5-attribute to false to get an input.
See here https://symfony.com/doc/current/reference/forms/types/time.html#html5
Related
Django==1.11.7
django-crudbuilder==0.2.5
Using Bootstrap datepicker. Now trying to use the datepicker in a crud form for a date field.
In a normal Django form, this would work:
self.fields['payment_date'].widget.attrs.update({'class': 'datepicker'})
But how can the class:datepicker be set for a particular field in a crud form?
The documentation doesn't seem to mention anything useful on css or html class.
Start with implementing custom templates.
Copy over the instance templates in crudbuilder/templates/crudbuilder/instance/ into your application template directory.
Replace the template location for the included form template in all the copied over instance templates .e.g. create.html
...
{% block main_content %}
<div class='container'>
<h3>Create {{actual_model_name|title}}</h3>
<hr/>
{% include "my_app/widgets/form.html" %}
</div>
{% endblock %}
In my_app/templates/my_app/widgets/form.html, write this instead to set the datepicker class on payment_date. (Original code was copied from django-cruid)
{% load crudbuilder %}
{% include "datepicker.html" %}
<form action="." method="post" enctype="multipart/form-data" class="form-horizontal" novalidate>
{% csrf_token %}
{% for field in form %}
<fieldset class={% if field.errors %} "form-group has-error" {% else %} "form-group" {% endif %} >
{{ field|label_with_class:"col-sm-2 control-label" }}
<div class="col-xs-4">
{% if field.name == 'payment_date' %}
{{ field|input_with_class:"form-control datepicker" }}
{% endif %}
{{ field|input_with_class:"form-control" }}
{{ field.errors }}
</div>
</fieldset>
{% endfor %}
<div class="form-group">
<div class="col-sm-offset-2 col-sm-12">
<input type="submit" value="Save" class="btn btn-success" />
</div>
</div>
</form>
Finally, set your crud form to use your custom templates.
class PersonCrud(BaseCrudBuilder):
...
custom_templates = {
'list': 'my_app/list.html',
'create': 'my_app/create.html',
'detail': 'my_app/detail.html',
'update': 'my_app/update.html',
'delete': 'my_app/delete.html'
}
I'm using Symfony to make a website for a tennis club, and I'm beating my head down about something :
I want to display an input field based on the option selected in a dropdown list.
This is the scenario :
I'm the admin of the website, and I want to make a reservation. If the reservation is a tournament (selected from a ChoiceType list), I want to display an input field to enter the tournament name.
I want to do something that would look like this in my twig view :
<div class="form-group">
<div class="col-xs-4">
{{ form_label(form.reservationType) }}
{{ form_widget(form.reservationType, {'attr': {'class': 'form-control' }}) }}
</div>
</div>
{% if reservationType == "tournament" %}
<div class="form-group">
<div class="col-xs-4>
{{ form_label(form.tournamentName) }}
{{ form_widget(form.tournamentName) }}
</div>
</div>
{% endif %}
Is it possible to do that just with twig ?
Thanks in advance!
You must use jQuery to solve this issue :
$(document).ready(function(){
$('.reservation').change(
var reservation = $(this).val();
if (reservation == 'xxxx'){
$('.tourName').show();
}else{
$('.tourName').hide();
}
);
});
<div class="form-group">
<div class="col-xs-4">
{{ form_label(form.reservationType) }}
{{ form_widget(form.reservationType, {'attr': {'class': 'form-control reservation' }}) }}
</div>
</div>
<div class="form-group">
<div class="col-xs-4>
{{ form_label(form.tournamentName) }}
{{ form_widget(form.tournamentName, {'attr': {'class': 'hidden tourName' }}) }}
</div>
</div>
No it is not possible only with twig.
What you can do is add a script to your template:
<div class="form-group">
<div class="col-xs-4">
{{ form_label(form.reservationType) }}
{{ form_widget(form.reservationType, {'attr': {'class': 'form-control reservation-type' }}) }}
</div>
</div>
<script type="text/javascript" src="{{ asset('bundles/yourBundle/theNameOfTheScriptYouPutInRessourcesPublic.js') }}"></script>
Then in the script (with jquery) you just listen to change event on the select to insert the input.
$('select.reservation-type').change(function(
if($(this).val() == 'tournament')
{
$('<input type="text" />').appendTo($(this).parent('form-group'));
}
));
If your inputs need twig variables or something you can add the inputs as hidden in the twig template and then in the script you just change the type from hidden to text or whatever you need:
$('select.reservation-type').change(function(
if($(this).val() == 'tournament')
{
$('input[name="tournament-name"]').prop('type', 'text');
}
));
If you don't want to use javascript you could consider using a form event listener: http://symfony.com/doc/current/form/dynamic_form_modification.html
http://symfony.com/doc/current/cookbook/form/form_collections.html
Symfony2 embedded forms rendering in a twig template
I am aware of how I might render the two forms on an individual field basis - but what I want to render the main form and sub-form in more expedient way:
{{ form_start(form) }}
{{ form_widget(form.base) }}
{{ form_widget(form.child1) }}
{{ form_widget(form.child2) }}
{{ form_end(form) }}
Possible? Or do I have to render each of the fields individually if I need this type of control?
EDIT | HERE IS WHAT I HAVE
<div class="box box-primary">
{{ form_start(form) }}
<div class="nav-tabs-custom">
<ul class="nav nav-tabs">
<li class="active">Master</li>
<li>Stock</li>
</ul>
<div class="tab-content">
<div class="active tab-pane" id="activity">
{{ form_row(form.partNumber) }}
{{ form_row(form.partDescription) }}
</div>
<div class="tab-pane" id="timeline">
{% for stock in form.inventoryStock %}
<div>{{ form_widget(stock.onHandQuantity) }}</div>
<div>{{ form_widget(stock.batchNumber) }}</div>
<div>{{ form_widget(stock.serialNumber) }}</div>
{% endfor %}
</div>
</div>
</div>
{{ form_end(form) }}
</div>
You should just need to do this:
{{ form_start(form) }}
{{ form_widget(form) }}
{{ form_end(form) }}
See the Rendering the Form section of the Symfony documentation. As long as everything is defined properly, Symfony will render all of the parts of the form for you, included forms that are embedded.
You often will need to use the capabilities for extra granularity but it's not required.
Also, it's absolutely possible to do what you stated - just give it a try and you'll see that you can.
I would like to use prototype like here http://symfony.com/doc/current/cookbook/form/form_collections.html#allowing-new-tags-with-the-prototype, but my form looks:
<div class="form-group row">
<div class="col-md-4">{{ form_widget(productAttribute.attribute, {'attr': {'class': 'form-control'}}) }}</div>
<div class="col-md-6">{{ form_widget(productAttribute.value, {'attr': {'class': 'form-control'}}) }}</div>
</div>
Before the loop is a div with data-prototype attribute which contains form fields without wrapped divs and classes and I don't know how to get wrapped divs with classes there. Thank you for your advice.
Twig side:
<div id="template" style="display: none">
{{ form_widget(form.tags.vars.prototype)|e }}
</div>
Js side:
var templateContent = $.("#template").html();
Or, twig:
{% set subform = form.tags.vars.prototype %}
{{ form_row(subform.fielName) }}
...
I'm new to symfony and twig. I want to build my html forms using BootStrap CSS Framework. So my form looks like this in twig file:
<form action="{{ path('register')}}" class="form-horizontal span10 offset7" id="frmRegistration" method="POST" {{ form_enctype(form) }} novalidate>
<fieldset>
{{ form_widget(form._token) }}
<div class="control-group">
{{ form_label(form.userName, null, {'label_attr': {'class':'control-label'}})}}
<div class="controls">
{{ form_widget(form.userName, {'attr': {'data-path': path('ajax_user_exists') } }) }}
</div>
</div>
<div class="control-group">
{{ form_label(form.password.first, null, {'label_attr': {'class':'control-label'}})}}
<div class="controls">
{{ form_widget(form.password.first) }}
</div>
</div>
<div class="control-group">
{{ form_label(form.password.second, null, {'label_attr': {'class':'control-label'}})}}
<div class="controls">
{{ form_widget(form.password.second) }}
</div>
</div>
<div class="control-group">
<div class="controls">
<input id="register_submit" type="submit" value="تاييد" class="btn btn-primary" />
</div>
</div>
</fieldset>
Now I want to show validation error messages exactly in front of each input. My problem is that how can I do this using twig? If I use {{ form_row(form.firstName) }} it will generate the label and input. But I cant wrap them inside the Bootstrap form structure. Any help is appreciated in advance.
UPDATE
Sorry for not being precise when reading symfony documentation. I found the solution. Using {{ form_errors(form.firstName) }} solved the problem.
This is still showing up as unanswered and thought it would be helpful if the answer was added at the end so this could be closed.
To add an error message on a form row, use:
{{ form_errors(form.firstName) }}
You will need to add the widget with this and the label if you want a label to show. Full rendering for each row requires all three:
{{ form_label(form.firstName) }}
{{ form_errors(form.firstName) }}
{{ form_widget(form.firstName) }}