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.