fouten hersteld

RudyVane · May 31, 2023 · 014c1dc · 014c1dc
1 parent e5af657
commit 014c1dc
Show file tree

Hide file tree

Showing 9 changed files with 298 additions and 266 deletions.
diff --git a/angular/src/app/app.component.html b/angular/src/app/app.component.html
@@ -5,7 +5,7 @@
 <button (click)="showRegisterComponent()">New user</button>
 <button (click)="showListComponent()">Properties</button>
 <button (click)="showUserAddComponent()">Write Advertisement</button>
-<button (click)="showUserAdvertisement()">Find Advertisements</button>
+<!--<button (click)="showUserAdvertisement()">Find Advertisements</button>-->
 
 </div>
 <router-outlet></router-outlet>

diff --git a/angular/src/app/app.module.ts b/angular/src/app/app.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { ReactiveFormsModule } from '@angular/forms';
-import {HttpClient, HttpClientModule} from '@angular/common/http';
+import { ReactiveFormsModule} from '@angular/forms';
+import { HttpClient, HttpClientModule} from '@angular/common/http';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { FormComponent } from './form/form.component';
@@ -28,7 +28,6 @@ import { FindAdvertisementComponent } from './find-advertisement/find-advertisem
     ContactformComponent,
     FindAdvertisementComponent
     // PropertyDetailsComponent
-
   ],
   imports: [
     BrowserModule,

diff --git a/angular/src/app/contactform/contactform.component.ts b/angular/src/app/contactform/contactform.component.ts
@@ -1,53 +1,57 @@
 import { Component } from '@angular/core';
+import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
 import { HttpClient } from '@angular/common/http';
 
-
 @Component({
   selector: 'app-contactform',
   template: `
     <div class="form-container">
-
-    <h2>Contact Form</h2>
-    <form (submit)="submitForm()">
-      <div>
-        <label for="name">Name:</label><br>
-        <input type="text" id="name" name="name" [(ngModel)]="name" required>
-      </div>
-      <div>
-        <label for="email">Email:</label><br>
-        <input type="email" id="email" name="email" [(ngModel)]="email" required>
-      </div>
-      <div>
-        <label for="message">Message:</label><br>
-        <textarea id="message" name="message" [(ngModel)]="message" required></textarea>
-      </div>
-      <button type="submit">Submit</button>
-    </form>
+      <h2>Contact Form</h2>
+      <form [formGroup]="contactForm" (submit)="submitForm()">
+        <div>
+          <label for="name">Name:</label><br>
+          <input type="text" id="name" formControlName="name" required>
+        </div>
+        <div>
+          <label for="email">Email:</label><br>
+          <input type="email" id="email" formControlName="email" required>
+        </div>
+        <div>
+          <label for="message">Message:</label><br>
+          <textarea id="message" formControlName="message" required></textarea>
+        </div>
+        <button type="submit" [disabled]="contactForm.invalid">Submit</button>
+      </form>
+    </div>
   `
 })
 export class ContactformComponent {
-  name: string = '';
-  email: string = '';
-  message: string = '';
+  contactForm: FormGroup;
+
+
+  constructor(private fb: FormBuilder, private http: HttpClient) {
+    this.contactForm = new FormGroup({
+      name: new FormControl('', Validators.required),
+      email: new FormControl('', Validators.required),
+      message: new FormControl('', Validators.required)
+    });
+  }
+
+
 
-  constructor(private http: HttpClient) {}
 
   submitForm() {
-    const contactForm = {
-      name: this.name,
-      email: this.email,
-      message: this.message
-    };
+    if (this.contactForm.invalid) {
+      return;
+    }
+
+    const contactForm = this.contactForm.value;
 
     this.http.post('/property/contact', contactForm).subscribe(
       () => {
         alert('Contact form submitted successfully!');
-        // Reset the form fields
-        this.name = '';
-        this.email = '';
-        this.message = '';
+        this.contactForm.reset();
       },
-
       (error) => {
         console.error('Failed to submit contact form:', error);
         alert('Failed to submit contact form. Please try again later.');

diff --git a/angular/src/app/property-list/property-list.component.html b/angular/src/app/property-list/property-list.component.html
@@ -23,6 +23,7 @@ <h1>Properties</h1>
 
   <!-- Move the filter buttons inside the ngIf condition -->
   <button (click)="applyFilters()">Apply Filters</button>
+  <button (click)="nextPage()">nextPage</button>
   <br><br>
   <div *ngIf="showFilterButtons && selectedCity !== 'All Cities'">
     <!-- Display the filter buttons only when the "Apply Filters" button is clicked and the selected city is not "All Cities" -->