javascript - Angular 2 - 表单提交未检索 value 属性

Question

我是 Angular2 和学习的新手。以下代码不会将 f.value 输出到控制台。它返回一个空对象。我在这里错过了什么吗？我正在使用 rc4。

任何帮助都会很棒。

组件.ts

import { Component } from '@angular/core';
import { NgForm} from '@angular/forms';

@Component({
  moduleId: module.id,
  selector: 'fa-template-driven-form',
  templateUrl: 'template-driven-form.component.html',
  styleUrls: ['template-driven-form.component.css']
})
export class TemplateDrivenFormComponent {

  onSubmit(form:NgForm) {
    console.log(form); // results in {}
  }

}

template-driven-form.component.html

<h1>Template Driven form</h1>
<form (ngSubmit)="onSubmit(f)" #f="ngForm">
  <div class="field">
    <label for="username">UserName</label>
    <input type="text" name="username" id="username" ngModel>
  </div>
  <div class="field">
    <label for="email">Email</label>
    <input type="email" name="email" id="email" ngModel>
  </div>
  <div class="field">
    <label for="password">Password</label>
    <input type="password" name="password" id="password" ngModel>
  </div>
  <div class="field">
    <button type="submit">Sign up</button>
  </div>
</form>

package.json

{   
   "@angular/common": "2.0.0-rc.4",
   "@angular/compiler": "2.0.0-rc.4",
   "@angular/core": "2.0.0-rc.4",
   "@angular/forms": "0.2.0",
   "@angular/http": "2.0.0-rc.4",
   "@angular/platform-browser": "2.0.0-rc.4",
   "@angular/platform-browser-dynamic": "2.0.0-rc.4",
   "@angular/router": "3.0.0-beta.2", 
}

Answer 1

应该是“onSubmit(f.value)”。