Closing MdDialog with md-dialog-close on button refreshes page

Bug, 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.

[crisbeto]

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?

[angular-automatic-lock-bot[bot]]

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