Adding FormGroup to FormArray in Angular2 http://stackoverflow.com/questions/41517389/angular-2-cant-add-form-group-to-form-array-in-reactive-forms

<!DOCTYPE html>
<html>

  <head>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://npmcdn.com/zone.js@0.6.21"></script>
    <script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>
    <script src="config.js"></script>
  </head>

  <body>
    <app>loading...</app>
    <script>
        System.import('app/main');
    </script>
  </body>

</html>

import { Component } from '@angular/core';

@Component({
  selector: 'app',
  template: `
    <h2>Adding FormGroup to FormArray in Angular2 <a href="http://stackoverflow.com/questions/41517389/angular-2-cant-add-form-group-to-form-array-in-reactive-forms">(link)</a></h2>
    <combined-component></combined-component>
  `
})
export class AppComponent {}

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

/**
 * PLUNKER VERSION (based on systemjs.config.js in angular.io)
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 * Override at the last minute with global.filterSystemConfig (as plunkers do)
 */
(function(global) {

  var ngVer = '@2.0.2'; // lock in the angular package version; do not let it float to current!

  var _map = {
    'app':                        'src', // 'dist',
    'rxjs':                       'https://npmcdn.com/rxjs@5.0.0-beta.6',
    'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api', // get latest
  };
  
  /** User packages configuration. */
  var _packages = {
    'app':                        { main: 'main.ts',  defaultExtension: 'ts' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' }
  };

  var barrels = [
    'common',
    'compiler',
    'core',
    'forms',
    'platform-browser',
    'platform-browser-dynamic',
    'testing',
    'upgrade'
  ];

  // add map and package entries for angular barrels in the form '@angular/common': 'https://npmcdn.com/@angular/common@0.0.0-3'
  barrels.forEach(function(pkgName) {
    _map['@angular/' + pkgName] = 'https://npmcdn.com/@angular/' + pkgName + ngVer;
    _packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
  });

  var config = {
    transpiler: 'typescript',
    typescriptOptions: {
      emitDecoratorMetadata: true
    },
    map: _map,
    packages: _packages
  }

  // filterSystemConfig - index.html's chance to modify config before we register it.
  if (global.filterSystemConfig) { global.filterSystemConfig(config); }

  System.config(config);

})(this);


/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

import { NgModule } from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { CombinedComponent } from './combined.component';

@NgModule({
  declarations: [
    AppComponent
    CombinedComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

import {Component, OnInit} from '@angular/core';
import {FormGroup, FormBuilder, FormArray, Validators, FormControl} from "@angular/forms";

@Component({
  selector: 'combined-component',
  template: `
    <form [formGroup]="ltsForm" novalidate (ngSubmit)="save()">
      <div formArrayName="products">
        <div *ngFor="let p of products.controls; let i=index">
          <div [formGroupName]="i">
            <input formControlName="id">
            <input type="checkbox" formControlName="value">
          </div>
        </div>
      </div>
      <button type="submit" [disabled]="!ltsForm.valid">
          Submit
      </button>
    </form>
  `
})
export class CombinedComponent implements OnInit {

  ltsForm: FormGroup;
  
  get products() { return this.ltsForm.get('products'); }

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
      this.ltsForm = this.formBuilder.group({
        products: this.formBuilder.array([])
      });
      
      for (let i = 0; i < 3; ++i) {
        this.addProduct();
      }
  }
  
  addProduct() {
    this.products.push(this.formBuilder.group({
      id: '',
      value: false
    }));
  }
  
  save() {
    console.log(this.ltsForm.value);
  }
}