कोणीय 2: उपयोगकर्ता को मोडल संवाद

Question

के बाहर क्लिक करने के लिए रोकें, मैं उपयोगकर्ता से मोडल संवाद के बाहर क्लिक करने से रोकना चाहता हूं और वह केवल संवाद से बाहर निकलने के लिए बटन दबा सकता है। मैं उसे कैसे कर सकता हूँ?

dialog.component.ts

ngOnInit() { 

const dialogRef = this.dialog.open(DialogResultComponent); 
dialogRef.afterClosed().subscribe(result => { 
    console.log(result); 
}); 

}

संवाद-result.component.ts

import { Component, OnInit } from '@angular/core'; 
import { MdDialog, MdDialogRef } from '@angular/material'; 
import { FormGroup,FormControl,Validators,FormBuilder, } from '@angular/forms'; 



@Component({ 
    selector: 'app-dialog-result', 
    templateUrl: './dialog-result.component.html', 
}) 

export class DialogResultComponent { 


    form: FormGroup; 
    name = new FormControl('',Validators.required); 
    width = new FormControl('',Validators.required); 
    height = new FormControl('',Validators.required); 
    constructor(public dialogRef: MdDialogRef<DialogResultComponent>,private fb: FormBuilder) { 

    } 

    ngOnInit() { 
    this.form = this.fb.group({ 
     'name' :this.name, 
     'width': this.width, 
     'height': this.height, 
    }); 
} 

    saveData(){ 
    console.log(this.name.value); 
    this.dialogRef.close({name:this.name.value,width:this.width.value,height:this.height.value}); 
    } 
} 

मैं करने की कोशिश की क्या है: संवाद-result.component। एचटीएमएल

 <div> 
    <form [formGroup]="form"> 
    <h3>MineSweeperwix</h3> 
     <div class="mdl-dialog__content"> 
       <p><mdl-textfield type="text" label="name" ([ngModel])="name" floating-label autofocus></mdl-textfield></p> 
       <mdl-textfield type="number" formControlName="width" label="width" floating-label autofocus></mdl-textfield> 
       <mdl-textfield type="number" formControlName="height" label="height" floating-label autofocus error-msg="'Please provide a correct email!'"></mdl-textfield> 
     </div> 
     <div class="mdl-dialog__actions"> 
     <button mdl-button (click)="saveData()" mdl-button-type="raised" mdl-colored="primary" mdl-ripple [disabled]="!form.valid">Save</button> 
     <button mdl-button (click)="dialogRef.close(dd)" mdl-button-type="raised" mdl-ripple>Cancel</button> 
     </div> 
    </form> 
    </div> 

संवाद-result.component.cs

div.modal-backdrop { 
    position: fixed; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    z-index: 100; /* less than your dialog but greater than the rest of your app */ 
    /* optional: */ 
    background: black; 
    opacity: 0.2; 
} 

Answer 1

भी एक डेमो जोड़ा जा रहा है के रूप में माइक ने कहा

openDialog() { 
    let dialogRef = this.dialog.open(DialogResultExampleDialog,{disableClose:true}); 
    dialogRef.afterClosed().subscribe(result => { 
     this.selectedOption = result; 
    }); 
    } 

LIVE DEMO

Answer 2

आप सामग्री डिज़ाइन संवाद है, जो एक पृष्ठभूमि को जोड़ने और समापन को रोकने के लिए एक विकल्प होता है का उपयोग कर रहे हैं।

मुझे लगता है कि आप इस तरह से कुछ करने की जरूरत है:

this.dialogRef = this.dialog.open(DialogResultComponent, { 
    disableClose: true, 
    hasBackdrop: true // or false, depending on what you want 
}); 

https://github.com/angular/material2/blob/master/src/demo-app/dialog/dialog-demo.ts पर डेमो देखें।

क्योंकि प्रलेखन अभी तक तैयार नहीं है, इसलिए मुझे स्रोत में शामिल किया गया है, जो उनके डेमो ऐप को देखने के लिए अमूल्य पाया गया है। ,

npm run demo-app