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,7 +4,10 @@
   <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"
@@ -17,7 +20,9 @@
     </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"

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,
   ],