Add required marker for required form field
This commit is contained in:
@@ -0,0 +1 @@
|
||||
<span class="required">*</span>
|
||||
@@ -0,0 +1,3 @@
|
||||
.required {
|
||||
color: red;
|
||||
}
|
||||
@@ -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 {
|
||||
}
|
||||
@@ -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"
|
||||
|
||||
@@ -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,
|
||||
],
|
||||
|
||||
Reference in New Issue
Block a user