Moving logic into functions.

Author: jrdutton

src/app/sub-forms/child-inner/child-inner.component.html

@@ -4,7 +4,7 @@
     <ng-container *ngFor="let item of fa.controls; let i = index">
       <div [formGroup]="fa.controls[i]" [formGroupName]="i">
         <label>Inner Item {{ i + 1 }} </label>
-        <app-child2 [child2]="_childInner ? _childInner.fa[i].child2 : null"></app-child2>
+        <app-child2 [child2]="child2(i)"></app-child2>
       </div>
       <button type="button" (click)="delete(i)">Delete</button>
     </ng-container>

src/app/sub-forms/child-inner/child-inner.component.ts

@@ -2,6 +2,7 @@ import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { AbstractControl, ControlContainer, FormArray, FormBuilder, FormGroup, FormGroupDirective } from '@angular/forms';
 import { FormUtilsService } from 'src/app/core/form-utils.service';
 import { ChildInner } from './child-inner.model';
+import { Child2 } from '../child2/child2.model';
 
 @Component({
   selector: 'app-child-inner',
@@ -44,6 +45,10 @@ export class ChildInnerComponent implements OnInit, OnDestroy {
     this.fa.removeAt(i);
   }
 
+  child2(i: number) {
+    return this._childInner && this._childInner.fa[i] ? this._childInner.fa[i].child2 : ({ childShared1: {}, childShared2: {} } as Child2);
+  }
+
   faItemFactory(): AbstractControl {
     return this.fb.group({});
   }

src/app/sub-forms/child-outer/child-outer.component.html

@@ -4,7 +4,7 @@
     <ng-container *ngFor="let item of fa.controls; let i = index">
       <div [formGroup]="fa.controls[i]" [formGroupName]="i">
         <label>Outer Item {{ i + 1 }} </label>
-        <app-child-inner [childInner]="_childOuter ? _childOuter.fa[i].childInner : null"></app-child-inner>
+        <app-child-inner [childInner]="childInner(i)"></app-child-inner>
       </div>
       <button type="button" (click)="delete(i)">Delete</button>
     </ng-container>

src/app/sub-forms/child-outer/child-outer.component.ts

@@ -2,6 +2,7 @@ import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { AbstractControl, ControlContainer, FormArray, FormBuilder, FormGroup, FormGroupDirective } from '@angular/forms';
 import { FormUtilsService } from 'src/app/core/form-utils.service';
 import { ChildOuter } from './child-outer.model';
+import { ChildInner } from '../child-inner/child-inner.model';
 
 @Component({
   selector: 'app-child-outer',
@@ -44,6 +45,14 @@ export class ChildOuterComponent implements OnInit, OnDestroy {
     this.fa.removeAt(i);
   }
 
+  childInner(i: number) {
+    return this._childOuter && this._childOuter.fa[i] && this._childOuter.fa[i].childInner
+      ? this._childOuter.fa[i].childInner
+      : ({
+          fa: []
+        } as ChildInner);
+  }
+
   faItemFactory(): AbstractControl {
     return this.fb.group({});
   }