【问题标题】：Open modal form containing form created from ngx-formly from another ngx-formly form打开模态表单，包含从另一个 ngx-formly 表单创建的表单
【发布时间】：2018-05-20 04:21:27
【问题描述】：

我目前正在使用 ngx-formly 从 JSON 动态创建一堆 Angular 表单，效果非常好。我有一个特殊的用例，表单上的自定义按钮应该打开一个模态对话框，其中包含单击时另一个表单，其中还包含使用 ngx-formly 创建的表单。我在 ngx-formly 网站上看到的示例使用自定义按钮，并使用 .ts 文件创建自定义组件，但我想避免这种情况，因为我会有多个表单这样做，而且我不想创建不同的组件为此。

有没有办法从 ngx-formly 表单触发模态对话框，以 ngx-formly 形式显示模态，而无需为它们创建多个 components(.ts) 文件？

【问题讨论】：

看看这是否对您有帮助，从任何地方使用动态数据打开通用模型，该答案同时具有 jquery 版本和 ngx-bootstrap 版本。 stackoverflow.com/questions/50296973/…
谢谢@BhushanBabar。效果很好。您可以添加为答案，以便我接受。
欢迎。我已经添加了答案，谢谢。

标签： json angular angular-forms angular-formly

【解决方案1】：

具有动态数据的通用引导模型

jQuery 示例： https://stackblitz.com/edit/ngx-bootstrap-fh92s3

modal.service.ts

import {Injectable} from '@angular/core';
import {ModalModel} from './modal.model';
import {Subject} from "rxjs/Subject";

declare let $: any;

@Injectable()
export class ModalService {

  modalData = new Subject<ModalModel>();

  modalDataEvent = this.modalData.asObservable();

  open(modalData: ModalModel) {

    this.modalData.next(modalData);

    $('#myModal').modal('show');
  }

}

modal.component.ts

import { Component } from '@angular/core';
import { ModalService } from './modal.service';
import {ModalModel} from './modal.model';

declare let $: any;

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: [ './modal.component.css' ]
})
export class ModalComponent  {

  modalData: ModalModel;

  constructor(private modalService: ModalService) {
    this.modalService.modalDataEvent.subscribe((data) => {
      this.modalData = data;
    })
  }

}

从任何组件调用此服务

import { Component } from '@angular/core';
import { ModalService } from '../modal/modal.service';
import { ModalModel } from '../modal/modal.model';


declare let $: any;

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: [ './home.component.css' ]
})
export class HomeComponent  {

  modelData = new ModalModel();

  constructor(private modalService: ModalService) {

  }

  open() {
    this.modelData.header = 'This is my dynamic HEADER from Home component';
    this.modelData.body = 'This is my dynamic BODY from Home component';
    this.modelData.footer = 'This is my dynamic footer from Home component';
    this.modalService.open(this.modelData);
  }
}

没有 jQuery 的示例，即使用 ngx-bootstrap： https://stackblitz.com/edit/angular-ngx-bootstrap-modal

【讨论】：