Magento 2 form field toggled type
-
12-12-2020 - |
문제
I want to create a toggle input option in magento 2 like this:
but i don't know what type of field is that, right now i'm using select dropdown like this:
$fieldset->addField(
'featured',
'select',
[
'label' => __('Featured'),
'title' => __('Featured'),
'required' => true,
'options' => ['1' => __('Yes'), '0' => __('No')],
'value' => $partner['featured']
]
);
해결책
This is checkbox form field. Which is included in UI Component library. You cannot use this toggle in $fieldset->addField()
. You need to create a form with UI component to create this type of toggle.
<field name="status">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="sortOrder" xsi:type="number">10</item>
<item name="dataType" xsi:type="string">boolean</item>
<item name="formElement" xsi:type="string">checkbox</item>
<item name="source" xsi:type="string">category</item>
<item name="prefer" xsi:type="string">toggle</item>
<item name="label" xsi:type="string" translate="true">Status</item>
<item name="valueMap" xsi:type="array">
<item name="true" xsi:type="string">1</item>
<item name="false" xsi:type="string">0</item>
</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">false</item>
</item>
<item name="default" xsi:type="string">1</item>
</item>
</argument>
</field>
다른 팁
Below solution is working for me. Hope it will help someone.
$fieldset->addField(
'my_field',
'checkbox',
[
'name' => 'my_field',
'class' => 'admin__actions-switch-checkbox',
'label' => __('My field label'),
'value' => $model->getData('my_field'),
'checked' => $model->getData('my_field'),
'after_element_js' => '
<label class="admin__actions-switch-label" for="my_field">
<span class="admin__actions-switch-text" data-text-on="'.__('Yes').'" data-text-off="'.__('No').'"></span>
</label>
<script type="text/javascript">
require(["jquery"], function($){
$("#my_field").change(function() {
if($("#my_field").is(":checked")) {
$("#my_field").val("1");
} else {
$("#my_field").val("0");
}
});
$("#edit_form").submit(function() {
$("#my_field").prop("checked", true);
});
});
</script>
'
]
);
While I recommend using the Ui component method. You can use the following (slightly roundabout) way to add a toggle checkbox if you only have addField at your disposal.
$fieldset->addField(
'my_field',
'checkbox',
[
'label' => __('My field label'),
'required' => false,
'value' => '1',
'name' => 'my_field',
'class' => 'admin__actions-switch-checkbox',
'after_element_js' => '
<label class="admin__actions-switch-label" for="my_field">
<span class="admin__actions-switch-text" data-text-on="'.__('Yes').'" data-text-off="'.__('No').'"></span>
</label>
'
]
);
제휴하지 않습니다 magento.stackexchange