Ensure that value changed event is raised only once.

frontend/src/app/framework/angular/forms/extended-form-array.ts

@@ -47,16 +47,16 @@ export class UndefinableFormArray extends ExtendedFormArray {
         }
     }
 
-    public push(control: AbstractControl) {
+    public push(control: AbstractControl, options?: { emitEvent: false }) {
         this.isUndefined = false;
 
-        super.push(control);
+        super.push(control, options);
     }
 
-    public insert(index: number, control: AbstractControl) {
+    public insert(index: number, control: AbstractControl, options?: { emitEvent: false }) {
         this.isUndefined = false;
 
-        super.insert(index, control);
+        super.insert(index, control, options);
     }
 
     public setValue(value?: any[], options?: { onlySelf?: boolean; emitEvent?: boolean }) {

frontend/src/app/framework/angular/forms/templated-form-array.spec.ts

@@ -150,4 +150,42 @@ describe('TemplatedFormArray', () => {
 
         expect(formTemplate.removeCalled).toEqual([]);
     });
+
+    it('should propagate value only once when multiple items are added', () => {
+        let changes: any[] = [];
+
+        formArray.valueChanges.subscribe(value => {
+            changes.push(value);
+        });
+
+        formArray.setValue([{ value: 1 }, { value: 2 }, { value: 3 }]);
+
+        expect(changes).toEqual([
+            [
+                { value: 1 },
+                { value: 2 },
+                { value: 3 },
+            ],
+        ]);
+    });
+
+    it('should propagate value only once when multiple items are removed', () => {
+        formArray.setValue([{ value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }, { value: 5 }]);
+
+        let changes: any[] = [];
+
+        formArray.valueChanges.subscribe(value => {
+            changes.push(value);
+        });
+
+        formArray.setValue([{ value: 1 }, { value: 2 }, { value: 3 }]);
+
+        expect(changes).toEqual([
+            [
+                { value: 1 },
+                { value: 2 },
+                { value: 3 },
+            ],
+        ]);
+    });
 });

frontend/src/app/framework/angular/forms/templated-form-array.ts

@@ -42,10 +42,10 @@ export class TemplatedFormArray extends UndefinableFormArray {
         super.reset(value, options);
     }
 
-    public add(initialValue?: any) {
+    public add(initialValue?: any, options?: { emitEvent: false }) {
         const control = this.template.createControl({}, initialValue);
 
-        this.push(control);
+        this.push(control, options);
 
         return control;
     }
@@ -71,7 +71,7 @@ export class TemplatedFormArray extends UndefinableFormArray {
             let index = this.controls.length;
 
             while (this.controls.length < value.length) {
-                this.add(value[index]);
+                this.add(value[index], { emitEvent: false });
 
                 index++;
             }