Add special liter l for unit

src/Vegasco-Web/src/app/modules/entries/edit-entry/components/required-marker.component.html

@@ -0,0 +1 @@
+<span class="required">*</span>

src/Vegasco-Web/src/app/modules/entries/edit-entry/components/required-marker.component.scss

@@ -0,0 +1,3 @@
+.required {
+    color: red;
+}

src/Vegasco-Web/src/app/modules/entries/edit-entry/components/required-marker.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-required-marker',
+  imports: [
+  ],
+  templateUrl: './required-marker.component.html',
+  styleUrl: './required-marker.component.scss'
+})
+export class RequiredMarkerComponent {
+}

src/Vegasco-Web/src/app/modules/entries/edit-entry/edit-entry.component.html

@@ -4,20 +4,25 @@
   <form [formGroup]="formGroup" class="flex flex-col gap-4" (ngSubmit)="onSubmit()">
 
     <div class="flex flex-col gap-2">
-      <label [for]="formFieldNames.car"> Auto </label>
+      <label [for]="formFieldNames.car">
+        Auto
+        <app-required-marker />
+      </label>
       @if (cars(); as cars) {
         <p-select
           [options]="cars"
           placeholder="Auto auswählen"
           [formControlName]="formFieldNames.car"
-          [optionLabel]="formFieldNames.car"
+          optionLabel="name"
           [inputId]="formFieldNames.car"
           styleClass="w-full" />
       }
     </div>
 
     <div class="flex flex-col gap-2">
-      <label [for]="formFieldNames.date"> Datum </label>
+      <label [for]="formFieldNames.date">
+        Datum
+      </label>
       <p-datepicker [iconDisplay]="'input'"
                     [firstDayOfWeek]="1"
                     placeholder="Datum auswählen"
@@ -29,7 +34,10 @@
     </div>
 
     <div class="flex flex-col gap-2">
-      <label [for]="formFieldNames.mileage"> Kilometerstand </label>
+      <label [for]="formFieldNames.mileage">
+        Kilometerstand
+        <app-required-marker />
+      </label>
       <p-inputGroup>
         <input 
           id="mileage"
@@ -43,7 +51,10 @@
     </div>
 
     <div class="flex flex-col gap-2">
-      <label [for]="formFieldNames.amount"> Menge </label>
+      <label [for]="formFieldNames.amount">
+        Menge
+        <app-required-marker />
+      </label>
       <p-inputGroup>
         <input 
           id="amount"
@@ -52,7 +63,7 @@
           min="1"
           pInputText
           [formControlName]="formFieldNames.amount" />
-        <p-inputGroupAddon>l</p-inputGroupAddon>
+        <p-inputGroupAddon>&#8467;</p-inputGroupAddon>
       </p-inputGroup>
     </div>
 

src/Vegasco-Web/src/app/modules/entries/edit-entry/edit-entry.component.ts

@@ -15,6 +15,7 @@ import { MultiSelectModule } from 'primeng/multiselect';
 import { SelectModule } from 'primeng/select';
 import { SkeletonModule } from 'primeng/skeleton';
 import { map } from 'rxjs';
+import { RequiredMarkerComponent } from './components/required-marker.component';
 
 @Component({
   selector: 'app-edit-entry',
@@ -29,6 +30,7 @@ import { map } from 'rxjs';
     InputTextModule,
     MultiSelectModule,
     ReactiveFormsModule,
+    RequiredMarkerComponent,
     SelectModule,
     SkeletonModule,
   ],