Enclose is a peculiar type of element provided by Larastrap: similar to a Form, it acts as a logical container for other elements without providing any actual HTML markup.
@php
$obj = App\Models\User::inRandomOrder()->first();
@endphp
<x-larastrap::enclose :obj="$obj">
<x-larastrap::text name="name" readonly squeeze />
<x-larastrap::email name="email" squeeze />
</x-larastrap::enclose>
<input id="input-0c5a900aa3a66947342cc44dcd1d4708" type="text" class="form-control-plaintext" name="name" value="Gerard McGlynn" readonly> <input id="input-f396b51040d70ae73d3203d5b94ab551" type="email" class="form-control" name="email" value="xwelch@example.org">His may purpose is to isolate different models within the same logical block. The common use case is: a form with a table involving multiple models at once, each with his own attributes (and his own input fields).
<x-larastrap::form>
<table class="table">
@foreach(App\Models\User::inRandomOrder()->take(3)->get() as $user)
<x-larastrap::enclose :obj="$user">
<tr>
<td><x-larastrap::text name="name" readonly squeeze="true" /></td>
<td><x-larastrap::email name="email" npostfix="[]" squeeze="true" /></td>
</tr>
</x-larastrap::enclose>
@endforeach
</table>
</x-larastrap::form>
<form id="form-45c48cce2e2d7fbdea1afc51c7c6ad26" class="" method="post" name="form-45c48cce2e2d7fbdea1afc51c7c6ad26">
<input type="hidden" name="_token" value="8OtOZuNVGEgDvC5FOCGqcnmWfB59gnK99ZtoTMPW" autocomplete="off">
<table class="table">
<tr>
<td>
<input id="input-a95325bf77c518ab711c9e728cb0b803" type="text" class="form-control-plaintext" name="name" value="Edwina Hettinger" readonly>
</td>
<td>
<input id="input-ef5c803d8578b413b49a831000b30f46" type="email" class="form-control" name="email[]" value="hermina.streich@example.net">
</td>
</tr>
<tr>
<td>
<input id="input-6837c0f093a6a04d2a922de7d856bc8b" type="text" class="form-control-plaintext" name="name" value="Gerard McGlynn" readonly>
</td>
<td>
<input id="input-5d298da01d369a167261d9ab16ef9330" type="email" class="form-control" name="email[]" value="xwelch@example.org">
</td>
</tr>
<tr>
<td>
<input id="input-cde9978a93ba8338b7a1bea552031d6c" type="text" class="form-control-plaintext" name="name" value="Prof. Elmo Rosenbaum" readonly>
</td>
<td>
<input id="input-8885e42cc74c2a04a31ebc653f0c4507" type="email" class="form-control" name="email[]" value="zemlak.noel@example.com">
</td>
</tr>
</table>
<div class="col-12 text-end">
<button id="button-bcdda4155123fe7edf1498a86d0160de" class="btn btn-primary" type="submit">Save</button>
</div>
</form>In the example above, it is important to note the use of npostfix parameter: when the form is submitted, all email addresses have to be serialized into an array and sent to the specified endpoint (the form's action ).
Enclose can also be used as a generic container in Custom Elements, to build your own composite widgets leveraging properties prependNodes and appendNodes common to all Containers.
The following example is quite silly, but demostrates how it is possible to pack a button and an hidden input field in a single-line widget to be reused across the whole application.
[
'customs' => [
'user-select' => [
'extends' => 'enclose',
'params' => [
'appendNodes' => [
[
'extends' => 'button',
'params' => [
'classes' => ['user-name'],
'label' => 'Click to select a user',
],
],
[
'extends' => 'hidden',
'params' => [
'name' => 'user_id',
'value' => '',
],
],
],
'reviewCallback' => function($element, $params) {
$obj = $params['obj'];
if ($obj) {
foreach($params['appendNodes'] as &$appended) {
if ($appended['extends'] == 'button') {
$appended['params']['label'] = $obj->name;
}
else if ($appended['extends'] == 'hidden') {
$appended['params']['value'] = $obj->id;
}
}
}
return $params;
}
],
],
],
]
@php
$users = App\Models\User::inRandomOrder()->take(5)->select(['name', 'id'])->get();
@endphp
<x-larastrap::user-select />
<script>
let users = {!! json_encode($users) !!}
let button = document.querySelector('.user-name');
button.addEventListener('click', () => {
let user = users[Math.floor(Math.random() * users.length)];
button.innerText = user.name;
document.querySelector('input[name=user_id]').value = user.id;
});
</script>
<button id="button-2ee14ebc9dd7acfe9e1cf1c1e93e4d0b" class="user-name btn btn-primary">Click to select a user</button> <input id="hidden-a83a8d110480c0fe71e8bed65cb7d055" type="hidden" class="" name="user_id" value="">
<script>
let users = [{"name":"Eliezer Luettgen","id":7},{"name":"Edwina Hettinger","id":5},{"name":"Shany Bosco","id":10},{"name":"Erica Krajcik","id":9},{"name":"Jules Wunsch","id":1}]
let button = document.querySelector('.user-name');
button.addEventListener('click', () => {
let user = users[Math.floor(Math.random() * users.length)];
button.innerText = user.name;
document.querySelector('input[name=user_id]').value = user.id;
});
</script>For convenience, it is possible to set both nprefix and npostfix parameters once on the Enclose, to be inherited by all the child Inputs.
<x-larastrap::form>
@foreach(App\Models\User::inRandomOrder()->take(3)->get() as $user)
<x-larastrap::enclose :obj="$user" nprefix="user_" npostfix="[]">
<div class="row mb-2">
<div class="col">
<x-larastrap::hidden name="id" squeeze />
<x-larastrap::email name="email" squeeze />
</div>
</div>
</x-larastrap::enclose>
@endforeach
</x-larastrap::form>
<form id="form-19ca14e7ea6328a42e0eb13d585e4c22" class="" method="post" name="form-19ca14e7ea6328a42e0eb13d585e4c22">
<input type="hidden" name="_token" value="8OtOZuNVGEgDvC5FOCGqcnmWfB59gnK99ZtoTMPW" autocomplete="off">
<div class="row mb-2">
<div class="col">
<input id="hidden-d5ac71aebf3b7cc31670c81b72308bd4" type="hidden" class="" name="user_id[]" value="9"> <input id="input-82358b98d5ad9c71b6dc2fca66188ca3" type="email" class="form-control" name="user_email[]" value="genevieve.reinger@example.com">
</div>
</div>
<div class="row mb-2">
<div class="col">
<input id="hidden-475daf24d191ddc0cb8dc9417c4772f5" type="hidden" class="" name="user_id[]" value="6"> <input id="input-c29d3600e563ce940989de93b65a16db" type="email" class="form-control" name="user_email[]" value="zemlak.noel@example.com">
</div>
</div>
<div class="row mb-2">
<div class="col">
<input id="hidden-527e7ce00aa2400becbba31f72127103" type="hidden" class="" name="user_id[]" value="7"> <input id="input-72c7cb306a10e32701a8e925a2a29f7f" type="email" class="form-control" name="user_email[]" value="ryan63@example.com">
</div>
</div>
<div class="col-12 text-end">
<button id="button-edf5887481642ec48e8cfb337f67c050" class="btn btn-primary" type="submit">Save</button>
</div>
</form>