title: User entered data is not storing in component's variable Angular Reactive form
body: <p>Hello I am using Angular reactive forms, I have used FormArray to add form controls dynamically. I am using ngModel directive to store user entered data in components variable. but it not storing it in components variable. my code is:</p>
  
  <pre><code>&lt;form [formGroup]="reviewForm" (ngSubmit)="onSubmit()"&gt;
    &lt;div class="example-label"&gt;
      &lt;span class='block'&gt;    
            &lt;span *ngIf="selectedForm"&gt;
                    &lt;h2 class="example-heading"&gt;{{displayForm}} &lt;/h2&gt;
            &lt;/span&gt;
      &lt;div formArrayName="controlArray"&gt;
        &lt;div *ngFor="let control of reviewForm.get('controlArray').controls; let i = index"&gt;
          &lt;table&gt;
            &lt;tr&gt;
              &lt;td&gt; &lt;span *ngIf="control.value.controlType == 'text'"&gt;
            &lt;md-form-field class="example-full-width"&gt;
              &lt;input mdInput type="text" placeholder="{{control.value.placeholder}}" 
              ([ngModel])="control.value.value" &gt; &lt;!--user entered data is not storing in control.value.value --&gt;
            &lt;/md-form-field&gt;  
        &lt;/span&gt;&lt;/td&gt;
  
            &lt;/tr&gt;
          &lt;/table&gt;
        &lt;/div&gt;
        &lt;button md-raised-button color="primary" type="submit" [disabled]="!reviewForm.valid"&gt;Submit&lt;/button&gt;
      &lt;/div&gt;
      &lt;/span&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Here is the component class code:</p>
  
  <pre><code>export class FormListComponent {
  
    formsDb: FormData[];
    selectedForm: FormData;
    displayForm: String;
    test: String;
    reviewForm = new FormGroup({
      'controlArray': new FormArray([])
    });
    constructor(public formService: FormService, public authGuardService: AuthGuardService) {
      console.log('form-list is logged in 0528', this.authGuardService.authService.isLoggedIn);
    }
  
    ngOnInit() {
      this.reviewForm = new FormGroup({
        'controlArray': new FormArray([
        ])
      });
      this.showDefaultForm();
    }
  
  
  
    addForm() {
      this.displayForm = this.selectedForm.formName;
      this.reviewForm.setControl('controlArray', new FormArray([]));  //to reset FormArray               
      console.log('selected form 0528', this.selectedForm);
      for (let control of this.selectedForm.controlsArr) {
        const myControl: Control = new Control(control.controlType, control.label, control.required,
          control.placeholder, control.options);
  
        var controlArg: FormControl;
        if (control.required)
          controlArg = new FormControl(myControl, Validators.required);
        else
          controlArg = new FormControl(myControl);
  
        (&lt;FormArray&gt;this.reviewForm.get('controlArray')).push(controlArg);
      }
    }
  
    onSubmit() {
      console.log('submitted form 0528', this.reviewForm);
    }
  }
  </code></pre>
  
  <p>Here is my Control class, I pass its object to FormControl constructor:</p>
  
  <pre><code>export class Control{  
      constructor(public controlType?:string, public label?:string, public required?:boolean ,public placeholder?:string, 
        public options?:string[], public value?:string){  }
    }
  </code></pre>
  
  <p>to check whether user entered data is stored in component's variable I logged my FormGroup variable i.e. reviewForm in this case. No data is saved in it. Please help, Thanks</p>