https://github.com/wbraganca/yii2-dynamicform
It is widget to yii2 framework to clone form elements in a nested manner, maintaining accessibility.
https://github.com/wbraganca/yii2-dynamicform
yii2-dynamicform yii2-extension yii2-framework
Last synced: 8 days ago
JSON representation
It is widget to yii2 framework to clone form elements in a nested manner, maintaining accessibility.
- Host: GitHub
- URL: https://github.com/wbraganca/yii2-dynamicform
- Owner: wbraganca
- License: other
- Created: 2014-09-24T12:19:32.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2024-03-18T10:00:19.000Z (about 1 year ago)
- Last Synced: 2025-04-13T23:55:24.021Z (about 1 month ago)
- Topics: yii2-dynamicform, yii2-extension, yii2-framework
- Language: JavaScript
- Homepage:
- Size: 85 KB
- Stars: 437
- Watchers: 53
- Forks: 445
- Open Issues: 239
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# yii2-dynamicform
[](https://github.com/wbraganca/yii2-dynamicform/releases)
[](LICENSE.md)
[](https://packagist.org/packages/wbraganca/yii2-dynamicform)
It is widget to yii2 framework to clone form elements in a nested manner, maintaining accessibility.
## Installation
The preferred way to install this extension is through [composer](http://getcomposer.org/download/).
Either run
```
php composer.phar require --prefer-dist wbraganca/yii2-dynamicform "*"
```
or add
```
"wbraganca/yii2-dynamicform": "*"
```
to the require section of your `composer.json` file.
## Demos
* [Demo 1](https://wbraganca.com/yii2extensions/dynamicform-demo1/) - (Address Book).
* [Demo 2](https://wbraganca.com/yii2extensions/dynamicform-demo2/) - (File Upload).
* [Demo 3](https://wbraganca.com/yii2extensions/dynamicform-demo3/) - (Nested Dynamic Form).
## Usage
### Hypothetical Scenario
### The View
```php
'dynamic-form']); ?>
= $form->field($modelCustomer, 'first_name')->textInput(['maxlength' => true]) ?>
= $form->field($modelCustomer, 'last_name')->textInput(['maxlength' => true]) ?>
Addresses
'dynamicform_wrapper', // required: only alphanumeric characters plus "_" [A-Za-z0-9_]
'widgetBody' => '.container-items', // required: css class selector
'widgetItem' => '.item', // required: css class
'limit' => 4, // the maximum times, an element can be cloned (default 999)
'min' => 1, // 0 or 1 (default 1)
'insertButton' => '.add-item', // css class
'deleteButton' => '.remove-item', // css class
'model' => $modelsAddress[0],
'formId' => 'dynamic-form',
'formFields' => [
'full_name',
'address_line1',
'address_line2',
'city',
'state',
'postal_code',
],
]); ?>
$modelAddress): ?>
Address
isNewRecord) {
echo Html::activeHiddenInput($modelAddress, "[{$i}]id");
}
?>
= $form->field($modelAddress, "[{$i}]full_name")->textInput(['maxlength' => true]) ?>
= $form->field($modelAddress, "[{$i}]address_line1")->textInput(['maxlength' => true]) ?>
= $form->field($modelAddress, "[{$i}]address_line2")->textInput(['maxlength' => true]) ?>
= $form->field($modelAddress, "[{$i}]city")->textInput(['maxlength' => true]) ?>
= $form->field($modelAddress, "[{$i}]state")->textInput(['maxlength' => true]) ?>
= $form->field($modelAddress, "[{$i}]postal_code")->textInput(['maxlength' => true]) ?>
= Html::submitButton($modelAddress->isNewRecord ? 'Create' : 'Update', ['class' => 'btn btn-primary']) ?>
```
### Javascript Events
```javascript
$(".dynamicform_wrapper").on("beforeInsert", function(e, item) {
console.log("beforeInsert");
});
$(".dynamicform_wrapper").on("afterInsert", function(e, item) {
console.log("afterInsert");
});
$(".dynamicform_wrapper").on("beforeDelete", function(e, item) {
if (! confirm("Are you sure you want to delete this item?")) {
return false;
}
return true;
});
$(".dynamicform_wrapper").on("afterDelete", function(e) {
console.log("Deleted item!");
});
$(".dynamicform_wrapper").on("limitReached", function(e, item) {
alert("Limit reached");
});
```
### The Controller (sample code)
```php
load(Yii::$app->request->post())) {
$modelsAddress = Model::createMultiple(Address::classname());
Model::loadMultiple($modelsAddress, Yii::$app->request->post());
// ajax validation
if (Yii::$app->request->isAjax) {
Yii::$app->response->format = Response::FORMAT_JSON;
return ArrayHelper::merge(
ActiveForm::validateMultiple($modelsAddress),
ActiveForm::validate($modelCustomer)
);
}
// validate all models
$valid = $modelCustomer->validate();
$valid = Model::validateMultiple($modelsAddress) && $valid;
if ($valid) {
$transaction = \Yii::$app->db->beginTransaction();
try {
if ($flag = $modelCustomer->save(false)) {
foreach ($modelsAddress as $modelAddress) {
$modelAddress->customer_id = $modelCustomer->id;
if (! ($flag = $modelAddress->save(false))) {
$transaction->rollBack();
break;
}
}
}
if ($flag) {
$transaction->commit();
return $this->redirect(['view', 'id' => $modelCustomer->id]);
}
} catch (Exception $e) {
$transaction->rollBack();
}
}
}
return $this->render('create', [
'modelCustomer' => $modelCustomer,
'modelsAddress' => (empty($modelsAddress)) ? [new Address] : $modelsAddress
]);
}
/**
* Updates an existing Customer model.
* If update is successful, the browser will be redirected to the 'view' page.
* @param integer $id
* @return mixed
*/
public function actionUpdate($id)
{
$modelCustomer = $this->findModel($id);
$modelsAddress = $modelCustomer->addresses;
if ($modelCustomer->load(Yii::$app->request->post())) {
$oldIDs = ArrayHelper::map($modelsAddress, 'id', 'id');
$modelsAddress = Model::createMultiple(Address::classname(), $modelsAddress);
Model::loadMultiple($modelsAddress, Yii::$app->request->post());
$deletedIDs = array_diff($oldIDs, array_filter(ArrayHelper::map($modelsAddress, 'id', 'id')));
// ajax validation
if (Yii::$app->request->isAjax) {
Yii::$app->response->format = Response::FORMAT_JSON;
return ArrayHelper::merge(
ActiveForm::validateMultiple($modelsAddress),
ActiveForm::validate($modelCustomer)
);
}
// validate all models
$valid = $modelCustomer->validate();
$valid = Model::validateMultiple($modelsAddress) && $valid;
if ($valid) {
$transaction = \Yii::$app->db->beginTransaction();
try {
if ($flag = $modelCustomer->save(false)) {
if (! empty($deletedIDs)) {
Address::deleteAll(['id' => $deletedIDs]);
}
foreach ($modelsAddress as $modelAddress) {
$modelAddress->customer_id = $modelCustomer->id;
if (! ($flag = $modelAddress->save(false))) {
$transaction->rollBack();
break;
}
}
}
if ($flag) {
$transaction->commit();
return $this->redirect(['view', 'id' => $modelCustomer->id]);
}
} catch (Exception $e) {
$transaction->rollBack();
}
}
}
return $this->render('update', [
'modelCustomer' => $modelCustomer,
'modelsAddress' => (empty($modelsAddress)) ? [new Address] : $modelsAddress
]);
}
...
}
```
### Model Class
```php
formName();
$post = Yii::$app->request->post($formName);
$models = [];
if (! empty($multipleModels)) {
$keys = array_keys(ArrayHelper::map($multipleModels, 'id', 'id'));
$multipleModels = array_combine($keys, $multipleModels);
}
if ($post && is_array($post)) {
foreach ($post as $i => $item) {
if (isset($item['id']) && !empty($item['id']) && isset($multipleModels[$item['id']])) {
$models[] = $multipleModels[$item['id']];
} else {
$models[] = new $modelClass;
}
}
}
unset($model, $formName, $post);
return $models;
}
}
```
### To zero or more elements (use the following code in your view file)
```php
'dynamic-form']); ?>
= $form->field($modelCustomer, 'first_name')->textInput(['maxlength' => true]) ?>
= $form->field($modelCustomer, 'last_name')->textInput(['maxlength' => true]) ?>
'dynamicform_wrapper', // required: only alphanumeric characters plus "_" [A-Za-z0-9_]
'widgetBody' => '.container-items', // required: css class selector
'widgetItem' => '.item', // required: css class
'limit' => 4, // the maximum times, an element can be added (default 999)
'min' => 0, // 0 or 1 (default 1)
'insertButton' => '.add-item', // css class
'deleteButton' => '.remove-item', // css class
'model' => $modelsAddress[0],
'formId' => 'dynamic-form',
'formFields' => [
'full_name',
'address_line1',
'address_line2',
'city',
'state',
'postal_code',
],
]); ?>
Addresses
Add
$modelAddress): ?>
Address
isNewRecord) {
echo Html::activeHiddenInput($modelAddress, "[{$i}]id");
}
?>
= $form->field($modelAddress, "[{$i}]full_name")->textInput(['maxlength' => true]) ?>
= $form->field($modelAddress, "[{$i}]address_line1")->textInput(['maxlength' => true]) ?>
= $form->field($modelAddress, "[{$i}]address_line2")->textInput(['maxlength' => true]) ?>
= $form->field($modelAddress, "[{$i}]city")->textInput(['maxlength' => true]) ?>
= $form->field($modelAddress, "[{$i}]state")->textInput(['maxlength' => true]) ?>
= $form->field($modelAddress, "[{$i}]postal_code")->textInput(['maxlength' => true]) ?>
= Html::submitButton($modelAddress->isNewRecord ? 'Create' : 'Update', ['class' => 'btn btn-primary']) ?>
```