SHIBUI: Fixed issue with wrong item being displayed in array properties

TIER · Feb 26, 2019 · 46ecc7b · 46ecc7b
1 parent 8856014
commit 46ecc7b
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/ui/src/app/schema-form/widget/array/array.component.html b/ui/src/app/schema-form/widget/array/array.component.html
@@ -22,15 +22,15 @@
     <ul class="mt-2"
         [ngClass]="{'bg-light border rounded p-3 list-group': getListType(formProperty) === 'object'}"
         [class.no-style]="getListType(formProperty) !== 'object'">
-        <li *ngFor="let itemProperty of formProperty.properties; let i=index; trackBy:trackByIndex"
+        <li *ngFor="let itemProperty of formProperty.properties; let i=index;"
             [class.mt-2]="i > 0"
             [class.list-group-item]="itemProperty.type === 'object'">
             <div [ngClass]="{ 'd-flex justify-content-between': itemProperty.type !== 'object' }">
                 <ng-container [ngSwitch]="itemProperty.type">
                     <ng-container *ngSwitchDefault>
                         <sf-form-element class="flex-grow-1" [formProperty]="itemProperty"></sf-form-element>
                         <div class="py-2">
-                            <button class="btn btn-link pt-1" (click)="removeItem(i)" role="button">
+                            <button class="btn btn-link pt-1" (click)="removeItem(i, itemProperty); $event.stopPropagation()" role="button">
                                 <i class="fa fa-fw fa-trash fa-lg text-danger"></i>
                                 <span class="sr-only" translate="action.remove">Remove</span>
                             </button>
@@ -48,7 +48,7 @@
                                         <small class="sr-only" *ngIf="itemProperty.value.makeDefault === true" translate="label.default">(default)</small>
                                     </ng-container>
                                 </span>
-                                <button class="btn btn-link pt-1" (click)="removeItem(i)" role="button">
+                                <button class="btn btn-link pt-1" (click)="removeItem(i, itemProperty); $event.stopPropagation()" role="button">
                                     <i class="fa fa-fw fa-trash fa-lg text-danger"></i>
                                     <span class="sr-only" translate="action.remove">Remove</span>
                                 </button>

diff --git a/ui/src/app/schema-form/widget/array/array.component.ts b/ui/src/app/schema-form/widget/array/array.component.ts
@@ -3,6 +3,7 @@ import { Component, AfterViewInit, OnDestroy } from '@angular/core';
 import { ArrayWidget } from 'ngx-schema-form';
 import { map } from 'rxjs/operators';
 import { Observable, Subscription } from 'rxjs';
+import { FormProperty } from 'ngx-schema-form/lib/model/formproperty';
 
 export interface FormError {
     code: string;
@@ -42,6 +43,11 @@ export class CustomArrayComponent extends ArrayWidget implements AfterViewInit,
         this.hasErrorSub.unsubscribe();
     }
 
+    removeItem(index: number, item: FormProperty = null): void {
+        this.formProperty.properties = (<FormProperty[]>this.formProperty.properties).filter(i => i !== item);
+        this.formProperty.updateValueAndValidity(false, true);
+    }
+
     addItem(): void {
         super.addItem();
     }