Closing MdDialog with md-dialog-close on button refreshes page
See original GitHub issueBug, feature request, or proposal:
Bug
What is the expected behavior?
I prepopulate a form inside of an MdDialog with data. I can click on a cancel button to close the dialog. That button is:
<button md-icon-button md-mini-fab color="warn" md-dialog-close>
<md-icon class="material-icons">cancel</md-icon>
</button>
The dialog then closes with no issues.
What is the current behavior?
When I click on the close button it refreshes the page with a query string containing the serialized data of the form.
What are the steps to reproduce?
Dialog component html:
<h3>Edit a User:</h3>
<form class="userForm">
<md-input-container class="firstName">
<input
md-input
placeholder="First Name"
[(ngModel)]="first_name"
name="first_name"
type="text"
required
>
</md-input-container>
<md-input-container class="lastName">
<input
md-input
placeholder="Last Name"
[(ngModel)]="last_name"
name="last_name"
type="text"
required
>
</md-input-container>
<br>
<md-input-container class="email">
<input
md-input
placeholder="Email"
[(ngModel)]="email"
name="email"
type="email"
required
>
</md-input-container>
<br>
<div class="userActionButtonGroup">
<button md-icon-button md-mini-fab color="accent" (click)="editUser()">
<md-icon class="material-icons">done</md-icon>
</button>
<button md-icon-button md-mini-fab color="warn" md-dialog-close>
<md-icon class="material-icons">cancel</md-icon>
</button>
</div>
</form>
typescript:
import { Component, OnInit } from '@angular/core';
import { MdDialog, MdDialogRef } from '@angular/material';
import { User } from '../../../services/user';
import { UsersService } from '../../../services/users.service';
@Component({
selector: 'app-edit-user',
templateUrl: './edit-user.component.html',
styleUrls: ['./edit-user.component.scss'],
providers: [ UsersService ]
})
export class EditUserComponent implements OnInit {
private errorMessage: string;
public id: number;
public first_name: string;
public last_name: string;
public email: string
constructor(
private usersService: UsersService,
private dialogRef: MdDialogRef<EditUserComponent>
) { }
ngOnInit() {
}
editUser() {
let thisUser = {
first_name: this.first_name,
last_name: this.last_name,
email: this.email
};
this.usersService.editUser(this.id, thisUser)
.subscribe(
(user) => {
this.dialogRef.close('updateUsers');
}, (error) => {
this.errorMessage = <any>error;
});
}
}
#### Which versions of Angular, Material, OS, browsers are affected?
angular-cli: 1.0.0-beta.24 node: 6.9.3 os: darwin x64 @angular/common: 2.4.2 @angular/compiler: 2.4.2 @angular/core: 2.4.2 @angular/forms: 2.4.2 @angular/http: 2.4.2 @angular/material: 2.0.0-beta.1 @angular/platform-browser: 2.4.2 @angular/platform-browser-dynamic: 2.4.2 @angular/router: 3.4.2 @angular/compiler-cli: 2.4.2
#### Is there anything else we should know?
I have the exact same functionality on two other dialogs except that those two are not prepopulated with forms.
Issue Analytics
- State:
- Created 7 years ago
- Comments:6 (3 by maintainers)
Top Results From Across the Web
AngularJs $mdDialog close disables page - Stack Overflow
I have a problem when closing mdDialog, here is the closePop I tried to ... When I hit the close button on the...
Read more >Services > $mdDialog - Angular Material
$mdDialog opens a dialog over the app to inform users about critical ... hasAlert()" class="md-raised"> Close Alert </md-button> </div> <div> <md-button ...
Read more >Dialog - MudBlazor - Blazor Component Library
MudDialog accepts keys to keyboard navigation. Escape key to close dialog. Closing a dialog by pressing escape has to be enabled by setting...
Read more >angular material dialog disable click outside - You.com
Disable click outside of angular material dialog area to close the dialog (With Angular ... if user hit the refresh button, or; click...
Read more >How to reload or re-render the entire page using AngularJS?
This method gives the same result as when we use the refresh or reload button. It just reset our whole website state.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
It’s because the button ends up submitting the form by default. You should be able to work around it by setting
type="button"
on it. @jelbourn do you think that this is something that we should handle automatically?This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.