ngx-bootstrap如何從另一個組件打開模式？

Question

我想要做的是從另一個組件打開一個模式，但是我一直得到這個錯誤TypeError: Cannot create property 'validator' on string 'test1'當component1.html加載，因爲包括childModal。我如何擺脫這些錯誤並正確實施？

component1.html

<button type="button" class="btn btn-outline-primary btn-lg" (click)="modal.showModal()">Test 
...... 
<child-modal #childModal ></child-modal> 

component1.ts

@ViewChild('childModal') childModal: ModalComponent; 

modal.html

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

modal.component.ts

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

Answer 1

如果你想從另一個組件打開一個模態分量，那麼這是NGX-引導做的正確方法：

：

import { Component } from '@angular/core'; 
import { BsModalService } from 'ngx-bootstrap/modal'; 
import { BsModalRef } from 'ngx-bootstrap/modal/modal-options.class'; 

/* This is the Component from which we open the Modal Component */ 
@Component({ 
    selector: 'my-component', 
    templateUrl: './service-component.html' 
}) 
export class MyComponent { 
    bsModalRef: BsModalRef; 
    constructor(private modalService: BsModalService) {} 

    public openModalWithComponent() { 
    /* this is how we open a Modal Component from another component */ 
    this.bsModalRef = this.modalService.show(ModalContentComponent); 
    } 
} 

/* This is the Modal Component */ 
@Component({ 
    selector: 'child-modal', 
    template: ` 
    <div class="modal-header"> 
     <h4 class="modal-title pull-left">Title</h4> 
     <button type="button" class="close pull-right" aria-label="Close" (click)="bsModalRef.hide()"> 
     <span aria-hidden="true">&times;</span> 
     </button> 
    </div> 
    <div class="modal-body"> 
     ... 
    </div> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" (click)="bsModalRef.hide()">Close</button> 
    </div> 
    ` 
}) 
export class ChildModalComponent { 
    constructor(public bsModalRef: BsModalRef) {} 
} 

被調用模態組件的模板

<button type="button" class="btn btn-primary" (click)="openModalWithComponent()">Create modal with component</button> 

所以，你應該不包括模態分量模板是這樣的：

<child-modal #childModal ></child-modal> 

正式開通了l doc：

https://valor-software.com/ngx-bootstrap/#/modals#service-component