Show the delete button in a form array even if it has a selected value

Author: VictorDuranEscire

src/app/shared/form/form.component.html

@@ -13,7 +13,7 @@
       (ngbEvent)="onCustomEvent($event)">
       <ng-template modelType="ARRAY" let-group let-index="index" let-context="context">
         <!--Array with repeatable items-->
-        <div *ngIf="(!context.notRepeatable) && !isVirtual(context, index) && group.context.groups.length !== 1 && !isItemReadOnly(context, index)"
+        <div *ngIf="(!context.notRepeatable) && !isVirtual(context, index) && isValidForShowDeleteButton(context, index) &&  !isItemReadOnly(context, index)"
              class="col-xs-2 d-flex flex-column justify-content-sm-start align-items-end">
             <button type="button" class="btn btn-secondary" role="button"
                     title="{{'form.remove' | translate}}"

src/app/shared/form/form.component.spec.ts

@@ -117,6 +117,7 @@ function init() {
             id: 'bootstrapArrayGroupInput',
             placeholder: 'example array group input',
             readOnly: false,
+            value: 'test',
           }),
         ];
       },
@@ -434,6 +435,16 @@ describe('FormComponent test suite', () => {
       expect(readOnly).toBe(false);
     }));
 
+    it('should return valid property from array item for show delete button', inject([FormBuilderService], (service: FormBuilderService) => {
+      spyOn(formComp.addArrayItem, 'emit');
+
+      formComp.insertItem(new Event('click'), formComp.formModel[0] as DynamicFormArrayModel, 0);
+
+      const isValid = formComp.isValidForShowDeleteButton(formComp.formModel[0] as DynamicFormArrayModel, 0);
+
+      expect(isValid).toBe(true);
+    }));
+
     it('should dispatch FormChangeAction when an item has been added to an array', inject([FormBuilderService], (service: FormBuilderService) => {
       formComp.insertItem(new Event('click'), formComp.formModel[0] as DynamicFormArrayModel, 0);
 

src/app/shared/form/form.component.ts

@@ -372,6 +372,9 @@ export class FormComponent implements OnDestroy, OnInit {
       // dispatch remove event for any field type except for qualdrop value
       this.removeArrayItem.emit(event);
     }
+    if (index === 0) {
+      this.insertItem($event,arrayContext,0);
+    }
   }
 
   insertItem($event, arrayContext: DynamicFormArrayModel, index: number): void {
@@ -387,6 +390,19 @@ export class FormComponent implements OnDestroy, OnInit {
     return isNotEmpty(value) && value.isVirtual;
   }
 
+  isValidForShowDeleteButton(context, index): boolean {
+   if(index > 0) return true;
+   return this.hasValue(context, index);
+  }
+
+  /**
+  * @Description check if the model has a value
+  * **/
+  hasValue(arrayContext, index: number) {
+    const context = arrayContext.groups[index];
+    return isNotEmpty((context.group[0] as any).value);
+  }
+
   protected getEvent($event: any, arrayContext: DynamicFormArrayModel, index: number, type: string): DynamicFormControlEvent {
     const context = arrayContext.groups[index];
     const itemGroupModel = context.context;