包含从ngx-formly从另一个ngx-formly表单创建的表单的开放模式形式 [英] Open modal form containing form created from ngx-formly from another ngx-formly form

问题描述

我目前正在使用ngx-formly从JSON动态创建一堆Angular表单，效果非常好.我有一个特殊的用例，其中表单上的自定义按钮应打开一个包含另一个表单的模式对话框，该对话框也包含单击形式，该表单也包含使用ngx-formly创建的表单.我在ngx-formly网站上看到的示例使用了一个自定义按钮，并使用.ts文件创建了一个自定义组件，但是我想避免这种情况，因为我将使用多种形式来执行此操作，并且我不想创建其他组件为此.

I'm currently using ngx-formly to dynamically create a bunch of Angular forms from JSON, which works really nicely. I have a peculiar use case where a custom button on a form, should open a modal dialog containing another form on click, which would also contain a form created using ngx-formly. The example I saw on the ngx-formly site use a custom button, and creates a custom component with .ts files, but I want to avoid that since I would have several forms doing this, and I don't want to create different components for this.

是否可以通过ngx形式触发模式对话框，以ngx形式显示模式对话框而不必为其创建多个component(.ts)文件?

Is there a way to trigger a modal dialog from an ngx-formly form, to show the modal with ngx-formly form without having to create multiple components(.ts) files for them?

推荐答案

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

Common Bootstrap Model with dynamic data

• 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
• Example without jQuery i.e with ngx-bootstrap: https://stackblitz.com/edit/angular-ngx-bootstrap-modal

这篇关于包含从ngx-formly从另一个ngx-formly表单创建的表单的开放模式形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！