form submission using md-card-actions and ngSubmit

[Dror Engel]

I'm using the example from GoogleIO to call simple function for sign in user flow

<form #f="ngForm" (ngSubmit)="onSubmit(f.form)" >

          <md-input

              placeholder="Email"

              ngControl="email"

              type="text"

              #email="ngForm"

          ></md-input>

          <md-input

              placeholder="Password "

              ngControl="password"

              type="password"

              #password="ngForm"

          ></md-input>

        </form>

      </md-card-content>

      <md-card-actions align="end">

        <button md-raised-button color="accent" type="submit">POST</button>

      </md-card-actions>

when I click on the button nothing would happen. When I move the button element within the form element, everything works fine. what am I missing? Thanks!

[Dominic Garms]

you need to wrap the form tag out of all the form and button elements:

<md-card>

<form>

<md-card-content>

(...)

</md-card-content>

<md-card-actions>

<button type="submit"></button>

</md-card-actions>

</md-card-actions>

</form>

</md-card>

[Benny Powers]

Hello! I have a form like this:

<md-card>

  <form id="car-stats" #carStatsForm="ngForm" (ngSubmit)="onSubmitStats()>

    <md-card-title>{{title}}</md-card-title>

    <md-card-subtitle>{{desc}}</md-card-subtitle>

    <md-card-content>

      <md-input [(ngModel)]="mileage" required></md-input>

      <md-input [(ngModel)]="zipCode" required></md-input>

      <div class="range">

        <label for="condition">Condition</label>

        <input name="condition" id="condition" type="range" min="0" max="4" [(ngModel)]="condition" required>

      </div>

    </md-card-content>

    <md-card-actions>

      <button md-button align="start" (click)="resetForms()">
        Start Again
      </button>

      <button md-raised-button type="submit">

        Get Your Quote!

      </button>

    </md-card-actions>

  </form>

</md-card>

and in the component's class:

onSubmitStats() {

  this.router.navigate(['/quote']);

}

When I submit the form by clicking, I'm cheerfully passed to the next route. But when I press enter any of the form elements, I'm kicked back to the root route with url query params corresponding to the values I entered (mileage="10000"&zipcode="90210"&condition="2")

Am I doing something wrong or did I find a bug?