Abdullah Mishari - Done

angular.json

@@ -91,5 +91,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

package.json

@@ -18,10 +18,10 @@
     "@angular/platform-browser": "^17.3.0",
     "@angular/platform-browser-dynamic": "^17.3.0",
     "@angular/router": "^17.3.0",
-    "@tailwindcss/postcss": "^4.1.3",
+    "@tailwindcss/postcss": "^4.1.4",
     "postcss": "^8.5.3",
     "rxjs": "~7.8.0",
-    "tailwindcss": "^4.1.3",
+    "tailwindcss": "^4.1.4",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"
   },

src/app/app.config.ts

@@ -1,8 +1,9 @@
-import { ApplicationConfig } from '@angular/core';
+import { ApplicationConfig, importProvidersFrom } from '@angular/core';
 import { provideRouter } from '@angular/router';
+import { HttpClientModule } from '@angular/common/http';
 
 import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes)]
+  providers: [provideRouter(routes), importProvidersFrom(HttpClientModule)],
 };

src/app/components/add-pet-form/add-pet-form.component.ts

@@ -1,7 +1,8 @@
 import { Component, inject } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
-import { ModalService } from '../../shared/services/modal.service';
 import { CommonModule } from '@angular/common';
+import { ModalService } from '../../shared/services/modal.service';
+import { PetService } from '../../shared/services/pet.service';
 
 @Component({
   selector: 'app-add-pet-form',
@@ -13,20 +14,26 @@ import { CommonModule } from '@angular/common';
 export class AddPetFormComponent {
   private fb = inject(FormBuilder);
   private modalService = inject(ModalService);
+  private petService = inject(PetService);
 
-  petForm = this.fb.group({
+  petForm = this.fb.nonNullable.group({
     name: ['', Validators.required],
     type: ['', Validators.required],
     image: ['', Validators.required],
-    adopted: [0],
   });
 
-  handleSubmit() {
-    if (this.petForm.valid) {
-      console.log('Submitted pet:', this.petForm.value);
-      this.modalService.close();
-    } else {
-      console.log('Form is invalid');
+  handleSubmit(): void {
+    if (this.petForm.invalid) {
+      return;
     }
+
+    const payload = this.petForm.getRawValue();
+    this.petService.addPet(payload).subscribe({
+      next: (created) => {
+        console.log('Pet added:', created);
+        this.modalService.close();
+      },
+      error: (err) => console.error('Add pet failed', err),
+    });
   }
 }