update form validation

src/app/components/contacts/contact-edit-new/contact-form/contact-form.component.html

@@ -16,7 +16,7 @@
         placeholder="{{
           contactData.firstName !== ''
             ? contactData.firstName
-            : ('contactDalogForm.firstName' | translate)
+            : ('contactDialogForm.firstName' | translate)
         }}"
         [(ngModel)]="contactData.firstName"
         autocomplete="off"
@@ -25,7 +25,7 @@
       @if (sharedService.isContactViewMedia) {
       <div class="error-msg">
         @if (!firstName.valid && firstName.touched) {
-        <p>{{ "contactDalogForm.invalidFirstName" | translate }}</p>
+        <p>{{ "contactDialogForm.invalidFirstName" | translate }}</p>
         }
       </div>
       }
@@ -38,7 +38,7 @@
         placeholder="{{
           contactData.lastName !== ''
             ? contactData.lastName
-            : ('contactDalogForm.lastName' | translate)
+            : ('contactDialogForm.lastName' | translate)
         }}"
         [(ngModel)]="contactData.lastName"
         autocomplete="off"
@@ -48,18 +48,18 @@
     @if (sharedService.isContactViewMedia) {
     <div class="error-msg">
       @if (!lastName.valid && lastName.touched) {
-      <p>{{ "contactDalogForm.invalidLastName" | translate }}</p>
+      <p>{{ "contactDialogForm.invalidLastName" | translate }}</p>
       }
     </div>
     } @if (!sharedService.isContactViewMedia) {
     <div class="error-msg">
       @if ((!firstName.valid && firstName.touched) && (!lastName.valid &&
       lastName.touched)) {
-      <p>{{ "contactDalogForm.invalidName" | translate }}</p>
+      <p>{{ "contactDialogForm.invalidName" | translate }}</p>
       } @else { @if (!firstName.valid && firstName.touched) {
-      <p>{{ "contactDalogForm.invalidFirstName" | translate }}</p>
+      <p>{{ "contactDialogForm.invalidFirstName" | translate }}</p>
       } @else { @if (!lastName.valid && lastName.touched) {
-      <p>{{ "contactDalogForm.invalidLastName" | translate }}</p>
+      <p>{{ "contactDialogForm.invalidLastName" | translate }}</p>
       } } }
     </div>
     }
@@ -71,16 +71,22 @@
       placeholder="{{
         contactData.email !== ''
           ? contactData.email
-          : ('contactDalogForm.email' | translate)
+          : ('contactDialogForm.email' | translate)
       }}"
       [(ngModel)]="contactData.email"
       autocomplete="off"
       required
     />
     <div class="error-msg">
-      @if (!email.valid && email.touched) {
-      <p>{{ "contactDalogForm.invalidEmail" | translate }}</p>
-      }
+      @if(!email.valid && email.touched &&
+      !checkIfUserEmailIsValid(contactData.email)) {
+      <p>{{ "contactDialogForm.invalidMail0" | translate }}</p>
+      } @else { @if (email.touched &&
+      !checkIfUserEmailIsValid(contactData.email)) {
+      <p>{{ "contactDialogForm.invalidMail1" | translate }}</p>
+      } @else { @if (existEmailonServer(contactData.email).length > 0) {
+      <p>{{ "regiscontactDialogFormter.invalidMail2" | translate }}</p>
+      } } }
     </div>
     <input
       id="phone"
@@ -90,22 +96,23 @@
       placeholder="{{
         contactData.phone !== ''
           ? contactData.phone
-          : ('contactDalogForm.phone' | translate)
+          : ('contactDialogForm.phone' | translate)
       }}"
       [(ngModel)]="contactData.phone"
+      pattern="[0-9]{7,10}"
       autocomplete="off"
       required
     />
     <div class="error-msg">
       @if (!phone.valid && phone.touched) {
-      <p>{{ "contactDalogForm.invalidPhone" | translate }}</p>
+      <p>{{ "contactDialogForm.invalidPhone" | translate }}</p>
       }
     </div>
     <div class="btns">
       <app-form-btn
         class="btn-delete"
         type="button"
-        value="{{ 'contactDalogForm.btnDelete' | translate }}"
+        value="{{ 'contactDialogForm.btnDelete' | translate }}"
         (click)="deleteContact()"
       ></app-form-btn>
       <app-form-btn
@@ -113,7 +120,7 @@
         [type]="'submit'"
         [img]="'check'"
         [imgFilter]="'none'"
-        value="{{ 'contactDalogForm.btnSave' | translate }}"
+        value="{{ 'contactDialogForm.btnSave' | translate }}"
         [disabled]="
           firstName.invalid ||
           !contactData.firstName ||
@@ -122,7 +129,8 @@
           email.invalid ||
           !contactData.email ||
           phone.invalid ||
-          !contactData.phone
+          !contactData.phone ||
+          !checkIfUserEmailIsValid(contactData.email)
         "
       ></app-form-btn>
     </div>

src/app/components/contacts/contact-edit-new/contact-form/contact-form.component.ts

@@ -53,12 +53,14 @@ export class ContactFormComponent implements OnInit, OnChanges {
   };
 
   ngOnInit() {
+    if (!this.currentUserId) {
       this.userData = {
         ...this.userData,
         color: this.randomColor,
         lastLogin: new Date().getTime(),
       };
     }
+  }
 
   ngOnChanges(changes: SimpleChanges) {
     if (changes['currentUserId']) {
@@ -88,17 +90,33 @@ export class ContactFormComponent implements OnInit, OnChanges {
   updateUserData() {
     this.userData = {
       ...this.userData,
-      firstName:
-        this.contactData.firstName.charAt(0).toUpperCase() +
-        this.contactData.firstName.slice(1).toLowerCase(),
-      lastName:
-        this.contactData.lastName.charAt(0).toUpperCase() +
-        this.contactData.lastName.slice(1).toLowerCase(),
+      firstName: this.capitalizeFirstLetter(this.contactData.firstName),
+      lastName: this.capitalizeFirstLetter(this.contactData.lastName),
       email: this.contactData.email,
       phone: this.contactData.phone,
     };
   }
 
+  capitalizeFirstLetter(name: string) {
+    return name.charAt(0).toUpperCase() + name.slice(1).toLowerCase();
+  }
+
+  checkIfUserEmailIsValid(emailValue: string) {
+    const channelNameLenght = emailValue.length;
+    const emailRegex = /^[\w.%+-]+@[\w.-]+\.[a-zA-Z]{2,}$/;
+    if (emailRegex.test(emailValue)) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  existEmailonServer(mail: string) {
+    return this.firebaseService
+      .getAllUsers()
+      .filter((user) => user.email === mail);
+  }
+
   private updateContactData() {
     this.contactData.firstName = this.firebaseService
       .getUserDetails(this.currentUserId, 'firstName')
@@ -124,7 +142,6 @@ export class ContactFormComponent implements OnInit, OnChanges {
       } else {
         const { id, ...taskWithoutIds } = this.userData;
         this.firebaseService.addNewUser(taskWithoutIds);
-        console.log('add new contact');
       }
       this.closeEditDialog();
     }

src/assets/i18n/de.json

@@ -55,13 +55,15 @@
     "legalNotice": "Rechtlicher Hinweis",
     "logout": "Abmelden"
   },
-  "contactDalogForm": {
+  "contactDialogForm": {
     "btnDelete": "Löschen",
     "btnSave": "Sichern",
     "invalidFirstName": "Ein Vorname ist erforderlich!",
     "invalidLastName": "Ein Nachname ist erforderlich!",
     "invalidName": "Ein Vorname & Nachname ist erforderlich!",
-    "invalidEmail": "Eine E-Mail Adresse ist erforderlich!",
+    "invalidMail0": "Sie müssen eine E-Mail Adresse eingeben!",
+    "invalidMail1": "Dies ist kein gültiges E-Mail-Format!",
+    "invalidMail2": "Diese E-Mail existiert bereits!",
     "invalidPhone": "Eine Telefonnummer ist erforderlich!",
     "firstName": "Vorname",
     "lastName": "Nachname",

src/assets/i18n/en.json

@@ -55,13 +55,15 @@
     "legalNotice": "Legal notice",
     "logout": "Log out"
   },
-  "contactDalogForm": {
+  "contactDialogForm": {
     "btnDelete": "Delete",
     "btnSave": "Save",
     "invalidFirstName": "A first name is required!",
     "invalidLastName": "A last name is required!",
     "invalidName": "A first name & last name is required!",
-    "invalidEmail": "A email is required!",
+    "invalidMail0": "You must enter a mail!",
+    "invalidMail1": "This is not a valid email format!",
+    "invalidMail2": "This email already exists!",
     "invalidPhone": "A phone number is required!",
     "firstName": "First name",
     "lastName": "Last name",