title: ngx-bootstrap How to open a modal from another component?
body: <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>