update validator user profil

src/app/content/hemat-app/user-profile/profil-information/profil-information.component.css

@@ -20,4 +20,16 @@ img {
   width: 100%;
   height: 100%;
   cursor: pointer;
-}
+}
+
+.btn-primary {
+  color: #000000 !important;
+  background-color: #c3f164 !important;
+  border-radius: 10px;
+  width: 145px;
+}
+
+.btn-primary:disabled {
+  background-color: gray !important;
+  cursor: not-allowed;
+}

src/app/content/hemat-app/user-profile/profil-information/profil-information.component.ts

@@ -2,6 +2,7 @@ import { Component, ViewChild } from "@angular/core";
 import { FormBuilder, FormGroup, NgForm, Validators } from "@angular/forms";
 import { LoginService } from "../../service/login.service";
 import { ToastrService } from "ngx-toastr";
+
 @Component({
   selector: "app-profil-information",
   templateUrl: "./profil-information.component.html",
@@ -14,7 +15,7 @@ export class ProfilInformationComponent {
   activeTab: string = "profile-info2";
   submitted = false;
   storedData: any;
-  disableButton: boolean = false
+  disableButton: boolean = false;
 
   url: any = 'https://www.w3schools.com/howto/img_avatar.png';
   fileSelected: any = null;
@@ -22,7 +23,7 @@ export class ProfilInformationComponent {
   constructor(
     private formBuilder: FormBuilder,
     private authService: LoginService,
-    private toastr: ToastrService,
+    private toastr: ToastrService
   ) {}
 
   ngOnInit(): void {
@@ -30,14 +31,17 @@ export class ProfilInformationComponent {
     this.profilInfo = this.formBuilder.group({
       firstName: ["", Validators.required],
       lastName: ["", Validators.required],
-      email: ["", Validators.required],
-      phone: ["", Validators.required],
+      email: ["", [Validators.required, Validators.email]],
+      phone: ["", [Validators.required, Validators.pattern(/^[0-9]{10,15}$/)]],
       image: [null]
     });
-    this.dataProfil(this.storedData.sub)
+    this.dataProfil(this.storedData.sub);
+    this.profilInfo.valueChanges.subscribe(() => {
+      this.disableButton = !this.profilInfo.valid;
+    });
   }
 
-  dataProfil(userId){
+  dataProfil(userId) {
     this.authService.getDataProfil(userId).subscribe(data => {
       this.profilInfo.patchValue({
         firstName: data.data.firstname,
@@ -47,7 +51,7 @@ export class ProfilInformationComponent {
         image: [null]
       });
       if (data.data.image_path !== "https://kapi.absys.ninja/hemat/image/null") {
-        this.url = data.data.image_path
+        this.url = data.data.image_path;
       }
     });
   }
@@ -79,9 +83,9 @@ export class ProfilInformationComponent {
   public deleteImage() {
     this.url = null;
     if (this.url === null) {
-      this.disableButton = true
-    } else{
-      this.disableButton = false
+      this.disableButton = true;
+    } else {
+      this.disableButton = false;
     }
     this.profilInfo.patchValue({ image: null });
   }
@@ -97,9 +101,12 @@ export class ProfilInformationComponent {
   onProjectInfoSubmit() {
     this.submitted = true;
     if (this.profilInfo.invalid) {
+      this.disableButton = true;
       return;
     }
 
+    this.disableButton = false;
+
     const formData = new FormData();
     formData.append("firstname", this.profilInfo.get("firstName").value);
     formData.append("lastname", this.profilInfo.get("lastName").value);
@@ -108,7 +115,7 @@ export class ProfilInformationComponent {
     formData.append("statusId", "2");
     formData.append("buildingId", "4");
     formData.append("image", this.fileSelected);
-    
+
     this.authService.updateProfile(formData, this.storedData.sub).subscribe(
       (response) => {
         console.log("Profile updated successfully:", response);
@@ -131,6 +138,6 @@ export class ProfilInformationComponent {
 
   cancel() {
     this.dataProfil(this.storedData.sub);
-    this.disableButton = false
+    this.disableButton = false;
   }
 }