@3kles/kles-material-dynamicforms 1.1.5 → 1.1.6

package/bundles/3kles-kles-material-dynamicforms.umd.js

@@ -300,16 +300,37 @@
         };
         KlesDynamicFormComponent.prototype.createControl = function (field) {
             var _this = this;
-            if (field.type === 'listField') {
+            if (field.type === 'array') {
                 var array_1 = this.fb.array([]);
-                field.value.forEach(function (data) {
-                    var subGroup = _this.fb.group({});
+                if (field.value && Array.isArray(field.value)) {
+                    if (field.collections && Array.isArray(field.collections)) {
+                        field.value.forEach(function (val) {
+                            var group = _this.fb.group({});
+                            field.collections.forEach(function (subfield) {
+                                var data = val[subfield.name] || null;
+                                var control = _this.createControl(__assign(__assign({}, subfield), (data && { value: data })));
+                                group.addControl(subfield.name, control);
+                            });
+                            array_1.push(group);
+                        });
+                    }
+                }
+                else {
+                    var group_1 = this.fb.group({});
                     field.collections.forEach(function (subfield) {
-                        var control = _this.createControl(subfield);
-                        subGroup.addControl(subfield.name, control);
+                        var control = _this.createControl(__assign({}, subfield));
+                        group_1.addControl(subfield.name, control);
                     });
-                    array_1.push(subGroup);
-                });
+                    array_1.push(group_1);
+                }
+                // field.value.forEach((data: any) => {
+                //     const subGroup = this.fb.group({});
+                //     field.collections.forEach(subfield => {
+                //         const control = this.createControl(subfield);
+                //         subGroup.addControl(subfield.name, control);
+                //     });
+                //     array.push(subGroup);
+                // });
                 return array_1;
             }
             else if (field.type === 'group') {
@@ -1086,6 +1107,31 @@
     //                 <mat-button-toggle value="underline">Underline</mat-button-toggle>
     //             </mat-button-toggle-group>
 
+    var KlesFormArrayComponent = /** @class */ (function (_super) {
+        __extends(KlesFormArrayComponent, _super);
+        function KlesFormArrayComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        KlesFormArrayComponent.prototype.ngOnInit = function () {
+            // this.subGroup = this.group.controls[this.field.name] as FormGroup;
+            _super.prototype.ngOnInit.call(this);
+            this.formArray = this.group.controls[this.field.name];
+            console.log('on arrive ici');
+            console.log(this.field);
+            console.log(this.formArray);
+        };
+        KlesFormArrayComponent = __decorate([
+            core.Component({
+                selector: 'kles-array',
+                template: "\n    <div [formGroup]=\"group\" class=\"group-container\">\n        <ng-container [formArrayName]=\"field.name\">\n            <div class=\"group-container\" *ngFor=\"let subGroup of formArray.controls let index = index;\" [style.flex-direction]=\"field.direction || 'row'\"\n            [ngClass]=\"field.ngClass\" [ngStyle]=\"field.ngStyle\">\n                <ng-container *ngFor=\"let subfield of field.collections;\"\n                    klesDynamicField [field]=\"subfield\" [group]=\"subGroup\" [siblingFields]=\"field.collections\">\n                </ng-container>\n            </div>\n        </ng-container>\n    </div>\n",
+                styles: ['mat-form-field {width: calc(100%)}',
+                    ':host { display:flex; flex-direction: inherit}',
+                    '.group-container {display:flex; flex-direction: inherit}']
+            })
+        ], KlesFormArrayComponent);
+        return KlesFormArrayComponent;
+    }(KlesFieldAbstract));
+
     var componentMapper = {
         label: KlesFormLabelComponent,
         input: KlesFormInputComponent,
@@ -1095,6 +1141,7 @@
         radio: KlesFormRadioComponent,
         checkbox: KlesFormCheckboxComponent,
         listField: KlesFormListFieldComponent,
+        array: KlesFormArrayComponent,
         color: KlesFormColorComponent,
         chip: KlesFormChipComponent,
         group: KlesFormGroupComponent,
@@ -1711,7 +1758,8 @@
         KlesFormLinkComponent,
         KlesFormSlideToggleComponent,
         KlesFormSelectionListComponent,
-        KlesFormButtonToogleGroupComponent
+        KlesFormButtonToogleGroupComponent,
+        KlesFormArrayComponent
     ];
     var directives = [KlesDynamicFieldDirective, KlesComponentDirective];
     var pipes = [KlesTransformPipe, ArrayFormatPipe];
@@ -1785,6 +1833,7 @@
     exports.KlesDynamicFieldDirective = KlesDynamicFieldDirective;
     exports.KlesDynamicFormComponent = KlesDynamicFormComponent;
     exports.KlesFieldAbstract = KlesFieldAbstract;
+    exports.KlesFormArrayComponent = KlesFormArrayComponent;
     exports.KlesFormBadgeComponent = KlesFormBadgeComponent;
     exports.KlesFormButtonCheckerComponent = KlesFormButtonCheckerComponent;
     exports.KlesFormButtonComponent = KlesFormButtonComponent;