Symfony - 集合表单原型不采用 html class 属性
Symfony - Collection Form prototype not taking html class attributes
我正在尝试添加带有一组幻灯片的轮播,但我无法设置嵌入式表单的样式。
我的原型跳过了表单中的一些 class 属性。
Documentation here
我的轮播类型:
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder->add('slides', CollectionType::class, [
'entry_type' => SlideType::class,
'allow_add' => true,
'allow_delete' => true,
'prototype' => true,
'by_reference' => false
]);
}
我的幻灯片类型:
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add('title', TextType::class, [
'attr' => [
'class' => 'form-control'
],
'required' => false
])
->add('url', UrlType::class, [
'attr' => [
'class' => 'form-control'
],
'required' => false
])
->add('file', FileType::class);
}
我的carousel_edit.html.twig:
{% extends 'base.html.twig' %}
% block body %}
<div class="row">
<div class="col-lg-12">
<div class="card card-default">
<div class="card-body">
{{ form_start(form) }}
<div class="slides" data-prototype="{{ form_widget(form.slides.vars.prototype)|e('html_attr') }}">
{% for slide in form.slides %}
<div class="slide">
<div class="form-group">
<label for="title">{{ form_label(slide.title) }}</label>
{{ form_widget(slide.title) }}
</div>
<div class="form-group">
<label for="url">{{ form_label(slide.url) }}</label>
{{ form_widget(slide.url) }}
</div>
<div class="form-group">
<label for="file">{{ form_label(slide.file) }}</label>
{{ form_widget(slide.file) }}
</div>
</div>
{% endfor %}
</div>
<button type="button" class="add_item_link" data-collection-holder-class="slides">Add a slide</button>
<div class="form-footer pt-4 pt-5 mt-4 border-top">
<button type="submit" class="btn btn-primary btn-default">Save</button>
</div>
{{ form_end(form) }}
</div>
</div>
</div>
</div>
{% endblock %}
{% block javascripts %}
<script>
jQuery(document).ready(function() {
var $slidesCollectionHolder = $('div.slides');
$slidesCollectionHolder.data('index', $slidesCollectionHolder.find('input').length);
$('body').on('click', '.add_item_link', function(e) {
var $collectionHolderClass = $(e.currentTarget).data('collectionHolderClass');
addFormToCollection($collectionHolderClass);
})
function addFormToCollection($collectionHolderClass) {
var $collectionHolder = $('.' + $collectionHolderClass);
var prototype = $collectionHolder.data('prototype');
var index = $collectionHolder.data('index');
var newForm = prototype;
newForm = newForm.replace(/__name__/g, index);
console.log(newForm);
$collectionHolder.data('index', index + 1);
var $newFormLi = $('<div class="slide"></div>').append(newForm);
$collectionHolder.append($newFormLi)
}
});
</script>
{% endblock %}
多么新的添加表单显示:
<div class="slide">
<div id="carousel_slides_3">
<div>
<label for="carousel_slides_3_title">Title</label>
<input type="text" id="carousel_slides_3_title" name="carousel[slides][3][title]" class="form-control">
</div>
<div>
<label for="carousel_slides_3_url">Url</label>
<input type="text" id="carousel_slides_3_url" name="carousel[slides][3][url]" class="form-control" inputmode="url">
</div>
<div>
<label for="carousel_slides_3_file" class="required">File</label>
<input type="file" id="carousel_slides_3_file" name="carousel[slides][3][file]" required="required">
</div>
</div>
</div>
新表单不显示 class="form-group"
属性。
我的配置有什么问题或 javascript?
它通过在 SlideType 端添加 class 属性并在模板端使用 form_row
来工作:
我的幻灯片类型:
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add('title', TextType::class, [
'row_attr' => [
'class' => 'form-group'
],
'attr' => [
'class' => 'form-control'
],
'required' => false
])
->add('url', UrlType::class, [
'row_attr' => [
'class' => 'form-group'
],
'attr' => [
'class' => 'form-control'
],
'required' => false
])
->add('file', FileType::class, [
'row_attr' => [
'class' => 'form-group'
],
'attr' => [
'class' => 'form-control'
]
]);
}
我的carousel_edit.html.twig:
{% block body %}
<div class="row">
<div class="col-lg-12">
<div class="card card-default">
<div class="card-body">
{{ form_start(form) }}
<div class="slides" data-prototype="{{ form_widget(form.slides.vars.prototype)|e('html_attr') }}">
{% for slide in form.slides %}
<div class="slide">
{{ form_row(slide.title) }}
{{ form_row(slide.url) }}
{{ form_row(slide.file) }}
</div>
{% endfor %}
</div>
<button type="button" class="btn btn-success add_item_link" data-collection-holder-class="slides">+</button>
<button type="button" class="btn btn-danger remove_item_link" data-collection-holder-class="slides">-</button>
<div class="form-footer pt-4 pt-5 mt-4 border-top">
<button type="submit" class="btn btn-primary btn-default">Save</button>
</div>
{{ form_end(form) }}
</div>
</div>
</div>
</div>
{% endblock %}
我正在尝试添加带有一组幻灯片的轮播,但我无法设置嵌入式表单的样式。 我的原型跳过了表单中的一些 class 属性。 Documentation here
我的轮播类型:
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder->add('slides', CollectionType::class, [
'entry_type' => SlideType::class,
'allow_add' => true,
'allow_delete' => true,
'prototype' => true,
'by_reference' => false
]);
}
我的幻灯片类型:
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add('title', TextType::class, [
'attr' => [
'class' => 'form-control'
],
'required' => false
])
->add('url', UrlType::class, [
'attr' => [
'class' => 'form-control'
],
'required' => false
])
->add('file', FileType::class);
}
我的carousel_edit.html.twig:
{% extends 'base.html.twig' %}
% block body %}
<div class="row">
<div class="col-lg-12">
<div class="card card-default">
<div class="card-body">
{{ form_start(form) }}
<div class="slides" data-prototype="{{ form_widget(form.slides.vars.prototype)|e('html_attr') }}">
{% for slide in form.slides %}
<div class="slide">
<div class="form-group">
<label for="title">{{ form_label(slide.title) }}</label>
{{ form_widget(slide.title) }}
</div>
<div class="form-group">
<label for="url">{{ form_label(slide.url) }}</label>
{{ form_widget(slide.url) }}
</div>
<div class="form-group">
<label for="file">{{ form_label(slide.file) }}</label>
{{ form_widget(slide.file) }}
</div>
</div>
{% endfor %}
</div>
<button type="button" class="add_item_link" data-collection-holder-class="slides">Add a slide</button>
<div class="form-footer pt-4 pt-5 mt-4 border-top">
<button type="submit" class="btn btn-primary btn-default">Save</button>
</div>
{{ form_end(form) }}
</div>
</div>
</div>
</div>
{% endblock %}
{% block javascripts %}
<script>
jQuery(document).ready(function() {
var $slidesCollectionHolder = $('div.slides');
$slidesCollectionHolder.data('index', $slidesCollectionHolder.find('input').length);
$('body').on('click', '.add_item_link', function(e) {
var $collectionHolderClass = $(e.currentTarget).data('collectionHolderClass');
addFormToCollection($collectionHolderClass);
})
function addFormToCollection($collectionHolderClass) {
var $collectionHolder = $('.' + $collectionHolderClass);
var prototype = $collectionHolder.data('prototype');
var index = $collectionHolder.data('index');
var newForm = prototype;
newForm = newForm.replace(/__name__/g, index);
console.log(newForm);
$collectionHolder.data('index', index + 1);
var $newFormLi = $('<div class="slide"></div>').append(newForm);
$collectionHolder.append($newFormLi)
}
});
</script>
{% endblock %}
多么新的添加表单显示:
<div class="slide">
<div id="carousel_slides_3">
<div>
<label for="carousel_slides_3_title">Title</label>
<input type="text" id="carousel_slides_3_title" name="carousel[slides][3][title]" class="form-control">
</div>
<div>
<label for="carousel_slides_3_url">Url</label>
<input type="text" id="carousel_slides_3_url" name="carousel[slides][3][url]" class="form-control" inputmode="url">
</div>
<div>
<label for="carousel_slides_3_file" class="required">File</label>
<input type="file" id="carousel_slides_3_file" name="carousel[slides][3][file]" required="required">
</div>
</div>
</div>
新表单不显示 class="form-group"
属性。
我的配置有什么问题或 javascript?
它通过在 SlideType 端添加 class 属性并在模板端使用 form_row
来工作:
我的幻灯片类型:
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add('title', TextType::class, [
'row_attr' => [
'class' => 'form-group'
],
'attr' => [
'class' => 'form-control'
],
'required' => false
])
->add('url', UrlType::class, [
'row_attr' => [
'class' => 'form-group'
],
'attr' => [
'class' => 'form-control'
],
'required' => false
])
->add('file', FileType::class, [
'row_attr' => [
'class' => 'form-group'
],
'attr' => [
'class' => 'form-control'
]
]);
}
我的carousel_edit.html.twig:
{% block body %}
<div class="row">
<div class="col-lg-12">
<div class="card card-default">
<div class="card-body">
{{ form_start(form) }}
<div class="slides" data-prototype="{{ form_widget(form.slides.vars.prototype)|e('html_attr') }}">
{% for slide in form.slides %}
<div class="slide">
{{ form_row(slide.title) }}
{{ form_row(slide.url) }}
{{ form_row(slide.file) }}
</div>
{% endfor %}
</div>
<button type="button" class="btn btn-success add_item_link" data-collection-holder-class="slides">+</button>
<button type="button" class="btn btn-danger remove_item_link" data-collection-holder-class="slides">-</button>
<div class="form-footer pt-4 pt-5 mt-4 border-top">
<button type="submit" class="btn btn-primary btn-default">Save</button>
</div>
{{ form_end(form) }}
</div>
</div>
</div>
</div>
{% endblock %}