Refactoring to Fragments

Learn how to make the codebase better by reusing code with the help of fragments.

Reducing duplication

Our edit.html still has a lot of duplication going on per property. We should refactor this a bit and introduce a few fragments to reduce the duplication.

As a reminder, this is the HTML for a single input we currently have:

Press + to interact
<div class="sm:col-span-3">
<label for="firstName" class="block text-sm font-medium text-gray-700"
th:text="#{user.firstName}">
First name
</label>
<div class="mt-1 relative rounded-md shadow-sm">
<input id="firstName"
type="text"
th:field="*{firstName}"
class="shadow-sm block w-full sm:text-sm border-gray-300 rounded-md"
th:classappend="${#fields.hasErrors('firstName')?'border-red-300 focus:border-red-300 focus:ring-red-500':'focus:ring-green-500 focus:border-green-500'}">
<div th:if="${#fields.hasErrors('firstName')}"
class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-red-500" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
clip-rule="evenodd"/>
</svg>
</div>
</div>
<p th:if="${#fields.hasErrors('firstName')}"
th:text="${#strings.listJoin(#fields.errors('firstName'), ', ')}"
class="mt-2 text-sm text-red-600" id="firstName-error">First name validation error message(s).</p>
</div>

Differences between input fields

Looking at the other inputs, we see ...

Get hands-on with 1400+ tech skills courses.