View on GitLab

Enclose

"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="Jessyca Goyette" readonly> <input id="input-f396b51040d70ae73d3203d5b94ab551" type="email" class="form-control" name="email" value="casper.lorine@example.net">

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="Jwj1PrKGVpdPPCbH5s6wISUit4RzITZn2eotiGYS" autocomplete="off">
  <table class="table">
    <tr>
      <td>
        <input id="input-a95325bf77c518ab711c9e728cb0b803" type="text" class="form-control-plaintext" name="name" value="Ebba Olson I" readonly>
      </td>
      <td>
        <input id="input-ef5c803d8578b413b49a831000b30f46" type="email" class="form-control" name="email[]" value="ebert.jeremy@example.net">
      </td>
    </tr>
    <tr>
      <td>
        <input id="input-6837c0f093a6a04d2a922de7d856bc8b" type="text" class="form-control-plaintext" name="name" value="Eliezer Luettgen" readonly>
      </td>
      <td>
        <input id="input-5d298da01d369a167261d9ab16ef9330" type="email" class="form-control" name="email[]" value="ryan63@example.com">
      </td>
    </tr>
    <tr>
      <td>
        <input id="input-cde9978a93ba8338b7a1bea552031d6c" type="text" class="form-control-plaintext" name="name" value="Geraldine Abshire IV" readonly>
      </td>
      <td>
        <input id="input-8885e42cc74c2a04a31ebc653f0c4507" type="email" class="form-control" name="email[]" value="lschultz@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 ).

nprefix / npostfix

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-c16a5320fa475530d9583c34fd356ef5" class="" method="post" name="form-c16a5320fa475530d9583c34fd356ef5">
  <input type="hidden" name="_token" value="Jwj1PrKGVpdPPCbH5s6wISUit4RzITZn2eotiGYS" autocomplete="off">
  <div class="row mb-2">
    <div class="col">
      <input id="hidden-8a94a2367dd80bab78f9f5d393b0e92d" type="hidden" class="" name="user_id[]" value="4"> <input id="input-ddbf71b041ee4c9d4f0677c0e78687c2" type="email" class="form-control" name="user_email[]" value="lschultz@example.com">
    </div>
  </div>
  <div class="row mb-2">
    <div class="col">
      <input id="hidden-8ef002e8ade1a534d9e6135f19a81b6d" type="hidden" class="" name="user_id[]" value="6"> <input id="input-a0bd115615cf9fe0532488c3290f3a29" 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-c271a9e9be7d9b81909f8193ae137514" type="hidden" class="" name="user_id[]" value="9"> <input id="input-964226bef6d8839e1c8159c40fdc7f7a" type="email" class="form-control" name="user_email[]" value="genevieve.reinger@example.com">
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-81c883664487d58de2546116f8b77265" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>