aknuth/bay-area-affiliates
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add phone & company name

Browse Source
This commit is contained in:
Andreas Knuth
2025-03-19 12:56:34 +01:00
parent e7cadb6df8
commit fcdd98c9ca
4 changed files with 83 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/app/components/contact.component.ts
View File

@@ -27,9 +27,10 @@ interface ErrorResponse {
<p class="mt-4 text-center text-gray-600">We're here to help you with all your IT needs.</p>
<div class="mt-12 max-w-lg mx-auto">
<form (ngSubmit)="onSubmit()" class="bg-white p-8 rounded-lg shadow" data-aos="fade-up">
<p class="text-sm text-gray-500 mb-4">Fields marked with <span class="text-red-600">*</span> are required</p>
<div class="mb-4 relative">
<label class="block text-gray-700 flex items-center">
Name
Name <span class="text-red-600 ml-1">*</span>
<span *ngIf="errors.name" class="ml-2 text-red-600 cursor-pointer"
[title]="errors.name"
data-tooltip-target="tooltip-name">
@@ -46,7 +47,7 @@ interface ErrorResponse {
</div>
<div class="mb-4 relative">
<label class="block text-gray-700 flex items-center">
Email
Email <span class="text-red-600 ml-1">*</span>
<span *ngIf="errors.email" class="ml-2 text-red-600 cursor-pointer"
[title]="errors.email"
data-tooltip-target="tooltip-email">
@@ -63,7 +64,39 @@ interface ErrorResponse {
</div>
<div class="mb-4 relative">
<label class="block text-gray-700 flex items-center">
Message
Phone <span class="text-gray-400 text-sm ml-1">(optional)</span>
<span *ngIf="errors.phone" class="ml-2 text-red-600 cursor-pointer"
[title]="errors.phone"
data-tooltip-target="tooltip-phone">
&#8505;
</span>
</label>
<input
type="tel"
name="phone"
[(ngModel)]="formData.phone"
class="w-full mt-2 p-3 border rounded"
placeholder="Your Phone Number">
</div>
<div class="mb-4 relative">
<label class="block text-gray-700 flex items-center">
Company <span class="text-gray-400 text-sm ml-1">(optional)</span>
<span *ngIf="errors.company" class="ml-2 text-red-600 cursor-pointer"
[title]="errors.company"
data-tooltip-target="tooltip-company">
&#8505;
</span>
</label>
<input
type="text"
name="company"
[(ngModel)]="formData.company"
class="w-full mt-2 p-3 border rounded"
placeholder="Your Company Name">
</div>
<div class="mb-4 relative">
<label class="block text-gray-700 flex items-center">
Message <span class="text-red-600 ml-1">*</span>
<span *ngIf="errors.message" class="ml-2 text-red-600 cursor-pointer"
[title]="errors.message"
data-tooltip-target="tooltip-message">
@@ -95,10 +128,12 @@ export class ContactComponent {
formData = {
name: '',
email: '',
phone: '',
company: '',
message: '',
};
//errors: { [key: string]: string } = {};
errors: { name?: string, email?:string, message?:string } = {};
// Update the errors type to include the new fields
errors: { name?: string, email?: string, phone?: string, company?: string, message?: string } = {};
constructor(private http: HttpClient, private overlayService: OverlayService) {}
@@ -108,7 +143,7 @@ export class ContactComponent {
try {
await lastValueFrom(this.http.post(`${this.apiBaseUrl}/api`, this.formData));
this.overlayService.showSuccess();
this.formData = { name: '', email: '', message: '' }; // Formular zurücksetzen
this.formData = { name: '', email: '', phone: '', company: '', message: '' }; // Reset form
} catch (error) {
if (error instanceof HttpErrorResponse && error.status === 400) {
const errorResponse = error.error as ErrorResponse;
@@ -116,11 +151,11 @@ export class ContactComponent {
this.errors[err.field] = err.message;
});
} else {
// Allgemeine Fehlerbehandlung
console.error('Ein unerwarteter Fehler ist aufgetreten:', error);
// General error handling
console.error('An unexpected error occurred:', error);
}
} finally {
this.overlayService.hideLoading();
}
}
}
}