[NAB-400] - Change data dialog formRef

src/app/dialogs/dialog-change-data/dialog-change-data.component.html

@@ -1,15 +1,16 @@
 <h2 mat-dialog-title>Change referenced data value{{dataSet.length > 1 ? 's' : ''}}</h2>
 <mat-dialog-content class="netgrif-input">
-    <mat-form-field fxFlex *ngFor="let data of dataSet">
+    <mat-form-field fxFlex *ngFor="let data of dataSet; let i = index">
         <mat-label>{{data.id}}</mat-label>
-        <input type="number" step="1" min="0" matInput [(ngModel)]="data.value" [formControl]="valueCtrl">
-        <mat-error *ngIf="valueCtrl.errors && valueCtrl.errors.required">Value is required</mat-error>
-        <mat-error *ngIf="valueCtrl.errors && valueCtrl.errors.validValue">Value can not be a negative number</mat-error>
+        <input type="number" step="1" min="0" matInput [formControl]="getControl(i)">
+
+        <mat-error *ngIf="getControl(i).errors?.required">Value is required</mat-error>
+        <mat-error *ngIf="getControl(i).errors?.validMultiplicity">Value can not be a negative number</mat-error>
     </mat-form-field>
     <span *ngIf="dataSet.length === 0">No referenced data found</span>
 </mat-dialog-content>
 <mat-dialog-actions>
-    <button mat-flat-button color="primary" [mat-dialog-close]="dataSet" [disabled]="valueCtrl.invalid">
+    <button mat-flat-button color="primary" [mat-dialog-close]="onSave()" [disabled]="formArray.invalid">
         <mat-icon>done</mat-icon>
         <span>Save</span>
     </button>

src/app/dialogs/dialog-change-data/dialog-change-data.component.ts

@@ -1,5 +1,5 @@
 import {Component, Inject} from '@angular/core';
-import {FormControl, ValidatorFn, Validators} from '@angular/forms';
+import {FormArray, FormControl, ValidatorFn, Validators} from '@angular/forms';
 import {MAT_DIALOG_DATA} from '@angular/material/dialog';
 
 export interface DataSet {
@@ -19,17 +19,22 @@ export interface Data {
 export class DialogChangeDataComponent {
 
     public dataSet: Array<Data>;
-    public valueCtrl: FormControl;
+    public formArray: FormArray;
 
     constructor(
         @Inject(MAT_DIALOG_DATA) public data: DataSet,
     ) {
         this.dataSet = new Array<Data>();
-        data.dataSet.forEach((value, id) => this.dataSet.push({id, value}));
-        this.valueCtrl = new FormControl('', [
-            Validators.required,
-            this.validValue()
-        ]);
+        this.formArray = new FormArray([]);
+
+        data.dataSet.forEach((value, id) => {
+            this.dataSet.push({id, value});
+            const valueCtrl = new FormControl(value, [
+                Validators.required,
+                this.validValue()
+            ]);
+            this.formArray.push(valueCtrl);
+        });
     }
 
     private validValue(): ValidatorFn {
@@ -41,4 +46,15 @@ export class DialogChangeDataComponent {
             return ({validMultiplicity: true})
         };
     }
+
+    public getControl(index: number): FormControl {
+        return this.formArray.at(index) as FormControl;
+    }
+
+    public onSave(): Array<Data> {
+        return this.dataSet.map((item, index) => ({
+            id: item.id,
+            value: this.formArray.at(index).value
+        }));
+    }
 }