我想阻止用户在模态对话框外单击,他只能按下按钮退出对话框.我怎样才能做到这一点?
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.html
<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; }
解决方法
正如Mike所说,添加一个演示,
openDialog() { let dialogRef = this.dialog.open(DialogResultExampleDialog,{disableClose:true}); dialogRef.afterClosed().subscribe(result => { this.selectedOption = result; }); }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。