對話框與angular2

形式I使用NG2的自舉模態對話框與angular2

添加樣品形式實施例確認對話框ng2-bootstrap-modal

變化模板

<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>

變化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() { 
    } 
}

我想在顯着的地方結果數據// ** //

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文件說，它可以返回指定類型

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

我想，我要通過這鍵入構造函數，然後在訂閱方法中獲得結果。

我不知道該怎麼做。

期待任何回覆。預先感謝您。

來源

2017-03-09 Grzesiek

只要將結果的類型從布爾型更改爲字符串，在你的情況。

export class DefproductsEdtComponent extends DialogComponent<ConfirmModel,  boolean>

來源

2017-07-14 21:56:38 Iurii

對話框與angular2

回答

相關問題