ngx-bootstrap How to open a modal from another component? : <p>What I'm trying to do is open a modal from another component, however I keep getting this error <code>TypeError: Cannot create property 'validator' on string 'test1'</code> when <code>component1.html</code> loads because <code>childModal</code> is included. How can I get rid of these errors and implement this properly?</p>

<p>component1.html</p>

<pre><code>&lt;button type="button" class="btn btn-outline-primary btn-lg" (click)="modal.showModal()"&gt;Test
......
&lt;child-modal #childModal &gt;&lt;/child-modal&gt;
</code></pre>

<p>component1.ts</p>

<pre><code> @ViewChild('childModal') childModal: ModalComponent;
</code></pre>

<p>modal.html</p>

<pre><code>&lt;div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1" role="dialog&gt;
    &lt;div class="modal-dialog modal-lg"&gt;
      &lt;div class="modal-content"&gt;
          &lt;input type="text" formControl="test1"&gt;
          &lt;input type="text" formControl="test2"&gt;
          &lt;/div&gt;
     &lt;/div&gt;
&lt;/div&gt;   
</code></pre>

<p>modal.component.ts</p>

<pre><code>constructor(private modalService: BsModalService) {
    this.form = new FormGroup({
      'test':                     new FormControl(),
      'test2':                    new FormControl()
      }) 
 }
</code></pre>
