2017-10-11 29 views
2

私がしようとしているのは、別のコンポーネントからモーダルを開いているのですが、が含まれているため、component1.htmlがロードされたときにこのエラーが発生し続けます。TypeError: Cannot create property 'validator' on string 'test1'これらのエラーを取り除き、これを正しく実装するにはどうすればよいですか?ngx-bootstrap他のコンポーネントからモーダルを開くにはどうすればいいですか?

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() 
     }) 
} 
+0

プランナーで再現できますか? – yurzui

答えて

3

あなたが別のコンポーネントからモーダルコンポーネントをオープンしようとしている場合、これは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> 

Officia l doc:

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

+0

他のコンポーネントのHTMLページから 'openModalWithComponent()'を呼び出すにはどうすればいいですか?そのように呼び出せるようにするためには、同じコンポーネント内に存在しなければならないのでしょうか? – derrickrozay

+0

私が私の答えで示したように、別のコンポーネントのHTMLページでは、メソッドの実行をトリガーすることができます(私の例では、メソッドは '

+0

動作しません。私は上記のコードから 'this.bsModalRef = this.modalService.show(ModalComponent);'を呼び出そうとしています。オーバーレイが表示されますが、実際のページは表示されません。上の例では、両方のコンポーネントが異なるファイルにありますか?それはどうやってそれを設定したのですか?私は3つの異なるモーダルを持つので、1つのファイルは必要ありません。 – derrickrozay

関連する問題