form array templates in form groups working (closes #139)

udos86 · Oct 9, 2016 · 20bda4b · 20bda4b
1 parent abf9ecd
commit 20bda4b
Show file tree

Hide file tree

Showing 20 changed files with 246 additions and 217 deletions.
diff --git a/README.md b/README.md
@@ -470,7 +470,7 @@ When using a ng2 Dynamic Forms UI package, e.g. `ui-bootstrap`, **all essential*
 
 Apart from that, ng2 Dynamic Forms does not make any further presumptions about optional CSS classes and leaves advanced layouting all up to you. That's **solid** yet **unobtrusive**.
 
-So let's say we want to implement a beautifully aligned Bootstrap [horizonal form](http://getbootstrap.com/css/#forms-horizontal):
+So let's say we want to implement a beautifully aligned Bootstrap [horizonal form](http://getbootstrap.com/css/#forms-horizontal)...
 
 At first we have to append the mandatory Bootstrap CSS class `form-horizontal` to the `<form>` element in our template:
 ```ts

diff --git a/example/app/bootstrap/bootstrap-example.component.html b/example/app/bootstrap/bootstrap-example.component.html
@@ -8,12 +8,12 @@
                                         (blur)="onBlur($event)"
                                         (focus)="onFocus($event)">
 
-            <template *ngIf="controlModel.type === 'ARRAY'" let-index="index">
+            <template let-context="context" let-index="index">
 
                 <div class="col-sm-4">
 
-                    <button type="button" class="btn btn-danger rounded" (click)="remove(index)">&#10005;</button>
-                    <button type="button" class="btn btn-success rounded" (click)="insert(index + 1)">&#43;</button>
+                    <button type="button" class="btn btn-danger rounded" (click)="remove(context, index)">&#10005;</button>
+                    <button type="button" class="btn btn-success rounded" (click)="insert(context, index + 1)">&#43;</button>
 
                 </div>
 

diff --git a/example/app/bootstrap/bootstrap-example.component.ts b/example/app/bootstrap/bootstrap-example.component.ts
@@ -32,24 +32,24 @@ export class BootstrapExampleComponent implements OnInit {
 
         this.form = this.dynamicFormService.createFormGroup(this.dynamicFormModel);
 
-        this.exampleControl = <FormControl> this.form.get("bootstrapInput"); // Type assertion for having updateValue method available
+        this.exampleControl = <FormControl> this.form.get("bootstrapFormGroup").get("bootstrapInput"); // Type assertion for having updateValue method available
         this.exampleModel = <DynamicInputModel> this.dynamicFormService.findById("bootstrapInput", this.dynamicFormModel);
         //this.exampleControl.valueChanges.subscribe((value: string) => console.log("example checkbox field changed to: ", value, typeof value));
 
-        this.sampleArrayControl = <FormArray> this.form.get("bootstrapFormArray");
+        this.sampleArrayControl = <FormArray> this.form.get("bootstrapFormGroup").get("bootstrapFormArray");
         this.sampleArrayModel = <DynamicFormArrayModel> this.dynamicFormService.findById("bootstrapFormArray", this.dynamicFormModel);
     }
 
     add() {
         this.dynamicFormService.addFormArrayGroup(this.sampleArrayControl, this.sampleArrayModel);
     }
 
-    insert(index: number) {
-        this.dynamicFormService.insertFormArrayGroup(index, this.sampleArrayControl, this.sampleArrayModel);
+    insert(context: DynamicFormArrayModel, index: number) {
+        this.dynamicFormService.insertFormArrayGroup(index, this.sampleArrayControl, context);
     }
 
-    remove(index: number) {
-        this.dynamicFormService.removeFormArrayGroup(index, this.sampleArrayControl, this.sampleArrayModel);
+    remove(context: DynamicFormArrayModel, index: number) {
+        this.dynamicFormService.removeFormArrayGroup(index, this.sampleArrayControl, context);
     }
 
     clear() {