title: Cannot read property '_syncPendingControls' of undefined in angular
body: <p>I am trying to upload two files in one form using reactive form. When I tried to upload in different forms, I am not getting any error, however now as soon as the page uploads, I get an error:  </p>
  
  <pre><code>  ERROR Error: formGroup expects a FormGroup instance. Please pass one in.
  
             Example:
  
  
          &lt;div [formGroup]="myGroup"&gt;
            &lt;input formControlName="firstName"&gt;
          &lt;/div&gt;
  
          In your class:
  
          this.myGroup = new FormGroup({
             firstName: new FormControl()
          });
  </code></pre>
  
  <p>And after uploading two files in a form (where the form is inside a modal page) and clicking on submit button, I get an error - </p>
  
  <blockquote>
    <p>ERROR TypeError: Cannot read property '_syncPendingControls' of
    undefined</p>
  </blockquote>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;button (click)="ngxSmartModalService.getModal('mySourceNTargetModal').open()" style="visibility:hidden" id="mySourceNTargetModal"&gt;Open myModal&lt;/button&gt;
  
  &lt;ngx-smart-modal #myTargetModal identifier="mySourceNTargetModal"&gt;
    &lt;form (ngSubmit)="sourceNTargetModalButton(addSourceNTargetModalData.value);mySourceNTargetModal.close()" [formGroup]="addTargetModalData"&gt;
      &lt;!-- &lt;label style="font-size: 1.2em !important;
       font-weight: 500 !important;"&gt; Enter Details:&lt;/label&gt; --&gt;
      &lt;!-- &lt;hr&gt; --&gt;
  &lt;div  class = "sourceNTargetContainer"&gt;
  
  
      &lt;div class="form-group row"&gt;
          &lt;label class="col-sm-3 col-form-label" style="font-size: 1.2em !important;
          font-weight: 500 !important;"&gt;Select Source file&lt;/label&gt;
          &lt;div class="col-sm-13"&gt;
              &lt;input id="cin" type="file"  (change)="fileTargetChangeEvent($event)" placeholder="Upload Source file" [formControl]="addSourceNTargetModalData.controls['addSourceFile']" multiple/&gt;
              &lt;!-- &lt;p style="color: rgb(223, 55, 55);; font-size:15px"
              *ngIf="addSourceNTargetModalData.get('addSourceFile').hasError('required') &amp;&amp; addSourceNTargetModalData.get('addSourceFile').touched"&gt; --&gt;
  
            &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;br&gt;
        &lt;hr&gt;
        &lt;br&gt;
  
      &lt;div class="form-group row"&gt;
        &lt;label class="col-sm-3 col-form-label" style="font-size: 1.2em !important;
        font-weight: 500 !important;"&gt;Select Target file&lt;/label&gt;
        &lt;div class="col-sm-13"&gt;
            &lt;input id="cin" type="file"  (change)="fileTargetChangeEvent($event)" placeholder="Upload Target file" [formControl]="addSourceNTargetModalData.controls['addTargetFile']" multiple/&gt;
            &lt;!-- &lt;p style="color: rgb(223, 55, 55);; font-size:15px"
            *ngIf="addSourceNTargetModalData.get('addTargetFile').hasError('required') &amp;&amp; addSourceNTargetModalData.get('addTargetFile').touched"&gt; --&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;button type="submit"  class="btn btn-secondary"  &gt;
        &lt;i class="glyphicon glyphicon-icon-shield"&gt;&lt;/i&gt;&amp;nbsp;Submit&lt;/button&gt;
      &lt;br&gt;
      &lt;br&gt;
    &lt;/div&gt;
    &lt;/form&gt;
  &lt;/ngx-smart-modal&gt;
  </code></pre>
  
  <p>How can I solve the error?</p>