title: Dynamic form using *ngFor and submitting values from it
body: <p>I have a <strong><a href="https://stackblitz.com/edit/dynamic-form-ngfor" rel="nofollow noreferrer">stackblitz</a></strong> as a guide.</p>
  
  <p>I am wanting to display a list of material cards that I click an 'edit' button, to which I can edit text fields, and when I click on the 'save' icon, it of course saves by triggering an function etc.</p>
  
  <p>I am struggling however to get to grips with how this all works within Angular and the Material nature of my app.</p>
  
  <p>html</p>
  
  <pre><code>&lt;form id="myForm" [formGroup]="thisIsMyForm"&gt;
    &lt;mat-card [formGroup]="x" *ngFor="let x of data; let i = index"&gt;
      &lt;mat-form-field&gt;
        &lt;label for="{{x.name}}"&gt;Name&lt;/label&gt;
        &lt;input formControlName="name" id="{{x.name}}" matInput value="{{x.name}}"&gt;
      &lt;/mat-form-field&gt;
      &lt;mat-form-field&gt;
        &lt;label for="{{x.type}}"&gt;Type&lt;/label&gt;
        &lt;input formControlName="type" id="{{x.type}}" matInput value="{{x.type}}"/&gt;
      &lt;/mat-form-field&gt;
    &lt;/mat-card&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>ts</p>
  
  <pre><code>import { Component, ViewChild } from '@angular/core';
  import {MatSnackBar} from '@angular/material';
  import {FormArray, FormBuilder, FormGroup, Validators} from '@angular/forms';
  
  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
  })
  export class AppComponent  {
    thisIsMyForm: FormGroup
  
    data = [
      {name:"one", type:"one"},
      {name:"two", type:"two"},
      {name:"three", type:"three"},
    ];
  
    constructor(private formBuilder: FormBuilder) {}
  
    onSubmit() {
      // Here I would like to be able to access the values of the 'forms'
    }
  
  }
  </code></pre>