fix validators for links in project & checking for empty values for link field

Author: Awakich

projects/social_platform/src/app/office/projects/edit/services/project-form.service.ts

@@ -13,6 +13,7 @@ import { ActivatedRoute } from "@angular/router";
 import { PartnerProgramFields } from "@office/models/partner-program-fields.model";
 import { Project } from "@office/models/project.model";
 import { ProjectService } from "@office/services/project.service";
+import { optionalUrlOrMentionValidator } from "@utils/optionalUrl.validator";
 import { stripNullish } from "@utils/stripNull";
 import { concatMap, filter } from "rxjs";
 /**
@@ -45,7 +46,7 @@ export class ProjectFormService {
       implementationDeadline: [null],
       trl: [null],
       links: this.fb.array([]),
-      link: ["", Validators.pattern(/^(https?:\/\/)/)],
+      link: ["", optionalUrlOrMentionValidator],
       industryId: [undefined],
       description: ["", [Validators.maxLength(800)]],
       presentationAddress: [""],
@@ -130,7 +131,7 @@ export class ProjectFormService {
     }
 
     links.forEach(link => {
-      linksFormArray.push(this.fb.control(link, [Validators.required]));
+      linksFormArray.push(this.fb.control(link, optionalUrlOrMentionValidator));
     });
   }
 
@@ -193,7 +194,13 @@ export class ProjectFormService {
    * @returns объект значений формы без nullish
    */
   public getFormValue(): any {
-    return stripNullish(this.projectForm.value);
+    const value = stripNullish(this.projectForm.value);
+
+    if (Array.isArray(value["links"])) {
+      value["links"] = value["links"].map((v: string) => v?.trim()).filter((v: string) => !!v);
+    }
+
+    return value;
   }
 
   // Геттеры для быстрого доступа к контролам основной формы

projects/social_platform/src/app/office/projects/edit/shared/project-main-step/project-main-step.component.html

@@ -415,7 +415,7 @@
     <div formArrayName="links">
       @if (hasLinks) {
       <ul class="project__links--wrapper">
-        @for (control of linksArray.controls; track trackByIndex($index)) {
+        @for (control of links.controls; track trackByIndex($index)) {
         <li class="project__links">
           <fieldset style="flex-grow: 1">
             <label class="text-body-12 field-label">ссылка на контакты и сообщества</label>

projects/social_platform/src/app/office/projects/edit/shared/project-main-step/project-main-step.component.ts

@@ -30,6 +30,7 @@ import { AvatarComponent } from "@ui/components/avatar/avatar.component";
 import { ProjectService } from "@office/services/project.service";
 import { RouterLink } from "@angular/router";
 import { generateOptionsList } from "@utils/generate-options-list";
+import { optionalUrlOrMentionValidator } from "@utils/optionalUrl.validator";
 
 @Component({
   selector: "app-project-main-step",
@@ -154,11 +155,7 @@ export class ProjectMainStepComponent implements OnInit, OnDestroy {
   }
 
   get links(): FormArray {
-    return this.projectContactsService.links;
-  }
-
-  get linksItems() {
-    return this.projectContactsService.linksItems;
+    return this.projectForm.get("links") as FormArray;
   }
 
   // Геттеры для работы с целями
@@ -194,7 +191,7 @@ export class ProjectMainStepComponent implements OnInit, OnDestroy {
    * Проверяет, есть ли ссылки для отображения
    */
   get hasLinks(): boolean {
-    return this.linksArray.length > 0;
+    return this.links.length > 0;
   }
 
   /**
@@ -204,15 +201,11 @@ export class ProjectMainStepComponent implements OnInit, OnDestroy {
     return this.goals.length > 0;
   }
 
-  get linksArray(): FormArray {
-    return this.projectForm.get("links") as FormArray;
-  }
-
   /**
    * Добавление ссылки
    */
   addLink(): void {
-    this.linksArray.push(this.fb.control("", Validators.required));
+    this.links.push(this.fb.control("", optionalUrlOrMentionValidator));
   }
 
   /**
@@ -228,7 +221,7 @@ export class ProjectMainStepComponent implements OnInit, OnDestroy {
    * @param index - индекс ссылки
    */
   removeLink(index: number): void {
-    this.linksArray.removeAt(index);
+    this.links.removeAt(index);
   }
 
   /**

projects/social_platform/src/app/utils/optionalUrl.validator.ts

@@ -0,0 +1,18 @@
+/** @format */
+
+import { AbstractControl, ValidationErrors } from "@angular/forms";
+
+export const optionalUrlOrMentionValidator = (
+  control: AbstractControl
+): ValidationErrors | null => {
+  const value: string = control.value;
+
+  if (!value.trim()) {
+    return null;
+  }
+
+  const isUrl = /^https?:\/\/.+$/.test(value);
+  const isMention = /^@[a-zA-Z0-9_]+$/.test(value);
+
+  return isUrl || isMention ? null : { invalidLink: true };
+};