Added validation
This commit is contained in:
parent
56c0b51538
commit
52d4245338
|
@ -7,23 +7,12 @@
|
|||
<span class="label-text">Location Name</span>
|
||||
<span class="label-text-alt">Name of the location</span>
|
||||
</div>
|
||||
<div class="input input-bordered flex items-center gap-2">
|
||||
<input
|
||||
formControlName="name"
|
||||
type="text"
|
||||
class="grow"
|
||||
placeholder="" />
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
class="h-4 w-4 opacity-70">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<input
|
||||
[ngClass]="getInputClass('name')"
|
||||
formControlName="name"
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
placeholder="" />
|
||||
<div class="label">
|
||||
<span class="label-text-alt"></span>
|
||||
<span class="label-text-alt"></span>
|
||||
|
@ -37,6 +26,7 @@
|
|||
<span class="label-text-alt"></span>
|
||||
</div>
|
||||
<input
|
||||
[ngClass]="getInputClass('postalCode')"
|
||||
type="text"
|
||||
formControlName="postalCode"
|
||||
class="input input-bordered w-full" />
|
||||
|
@ -52,6 +42,7 @@
|
|||
<span class="label-text-alt">Name of the city</span>
|
||||
</div>
|
||||
<input
|
||||
[ngClass]="getInputClass('city')"
|
||||
type="text"
|
||||
formControlName="city"
|
||||
class="input input-bordered w-full" />
|
||||
|
@ -69,6 +60,7 @@
|
|||
<span class="label-text-alt">Name of the street</span>
|
||||
</div>
|
||||
<input
|
||||
[ngClass]="getInputClass('street')"
|
||||
type="text"
|
||||
formControlName="street"
|
||||
class="input input-bordered w-full" />
|
||||
|
@ -84,6 +76,7 @@
|
|||
<span class="label-text-alt"></span>
|
||||
</div>
|
||||
<input
|
||||
[ngClass]="getInputClass('houseNumber')"
|
||||
type="text"
|
||||
formControlName="houseNumber"
|
||||
class="input input-bordered w-full" />
|
||||
|
|
|
@ -1,5 +1,11 @@
|
|||
import { CommonModule } from '@angular/common';
|
||||
import { Component, output, OutputEmitterRef } from '@angular/core';
|
||||
import {
|
||||
Component,
|
||||
output,
|
||||
OutputEmitterRef,
|
||||
signal,
|
||||
WritableSignal,
|
||||
} from '@angular/core';
|
||||
import {
|
||||
FormBuilder,
|
||||
FormGroup,
|
||||
|
@ -24,18 +30,33 @@ export class LocationDialogComponent {
|
|||
public locationCreated: OutputEmitterRef<EventLocation> =
|
||||
output<EventLocation>();
|
||||
public locationForm: FormGroup = new FormGroup({});
|
||||
public formSubmitted: WritableSignal<boolean> = signal<boolean>(false);
|
||||
|
||||
public constructor(private readonly formBuilder: FormBuilder) {
|
||||
this.locationForm = this.formBuilder.group({
|
||||
name: ['', [Validators.required, Validators.minLength(3)]],
|
||||
postalCode: ['', [Validators.required, Validators.pattern(/^\d{5}$/)]],
|
||||
city: ['', Validators.required],
|
||||
street: ['', Validators.required],
|
||||
houseNumber: ['', Validators.required],
|
||||
name: ['', Validators.required],
|
||||
city: ['', [Validators.required, Validators.minLength(2)]],
|
||||
street: ['', [Validators.required, Validators.minLength(3)]],
|
||||
houseNumber: [
|
||||
'',
|
||||
[Validators.required, Validators.pattern(/^[0-9]+[a-zA-Z]?$/)],
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
public getInputClass(controlName: string): string {
|
||||
const control = this.locationForm.get(controlName);
|
||||
|
||||
if ((control?.dirty || this.formSubmitted()) && control?.touched) {
|
||||
return control.valid ? 'input-success' : 'input-error';
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
public createLocation(): void {
|
||||
this.formSubmitted.set(true);
|
||||
this.locationForm.markAllAsTouched();
|
||||
if (this.locationForm.valid) {
|
||||
this.locationCreated.emit(this.locationForm.value);
|
||||
this.closeModal();
|
||||
|
@ -47,6 +68,10 @@ export class LocationDialogComponent {
|
|||
'location_modal'
|
||||
) as HTMLDialogElement;
|
||||
|
||||
this.locationForm.reset();
|
||||
this.locationForm.markAsUntouched();
|
||||
this.locationForm.markAsPristine();
|
||||
this.formSubmitted.set(false);
|
||||
modal.showModal();
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue