Dialog with form in angular2

Question

I use ng2-bootstrap-modal

add sample form to example Confirm Dialog ng2-bootstrap-modal

change template

<div class="modal-dialog">
  <div class="modal-content">
    <form [formGroup]="loginForm" (ngSubmit)="doLogin($event)">
      <div class="modal-header">
         <button type="button" class="close" (click)="close()">&times;</button>
         <h4 class="modal-title">{{title || 'Confirm'}}</h4>
      </div>
      <div class="modal-body">
        <p>{{message || 'Are you sure?'}}</p>
        <div>
          <input formControlName="email" type="email" placeholder="Your email">
          <input formControlName="password" type="password" placeholder="Your password">
        </div>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary">OK</button>
        <button type="button" class="btn btn-default" (click)="close()" >Cancel</button>
      </div>
    </form>
</div>

change ts

import { Component, OnInit, } from '@angular/core';
import { DialogComponent, DialogService } from "ng2-bootstrap-modal";
import { FormBuilder, Validators } from '@angular/forms'

export interface ConfirmModel {
  title:string;
  message:string;
}

@Component({
  selector: 'app-defproducts-edt',
  templateUrl: './defproducts-edt.component.html'
  //, styleUrls: ['./defproducts-edt.component.css']
})

export class DefproductsEdtComponent extends DialogComponent<ConfirmModel,     boolean> implements ConfirmModel, OnInit {

  title: string;
  message: string;

  public loginForm = this.fb.group({
    email: ["", Validators.required],
    password: ["", Validators.required]
  });

  constructor(dialogService: DialogService, public fb: FormBuilder) {
    super(dialogService);
  }

  confirm() {
    // we set dialog result as true on click on confirm button, 
    // then we can get dialog result from caller code 

    this.result = true;
    this.close();
  }

  doLogin(event) {
    console.log(event);
    console.log(this.loginForm.value);
    this.close();
  }

  ngOnInit() {
  }
}

I want to get result data in marked place //** **//

let disposable = this.dialogService.addDialog(DefproductsEdtComponent, {
            title:'Confirm title', 
            message:'Confirm message'})
            .subscribe((isConfirmed)=>{
                //We get dialog result
                if(isConfirmed) {
                    // **HOW This place get data from form on dialog? **//
                    //alert();
                } else {
                    //alert('declined');
                }
            });

}

ng2-bootstrap documentation says that it can return specified type

abstract class DialogComponent ....
/**
* Dialog result 
* @type {T2}
*/
protected result:T2

I guess that I have to pass this type into constructor and then get a result in subscribe method.

I got no idea how to do it.

Looking forward to any replies. Thank you in advance.

Answer 1

在您的情况下，只需将结果类型从布尔值更改为字符串。

export class DefproductsEdtComponent extends DialogComponent<ConfirmModel,     boolean>