javascript - Angular 2 - フォームの送信で値のプロパティが取得されない

Question

私はangular2と学習が初めてです。f.value次のコードはコンソールに出力されません。空のオブジェクトを返します。ここで何か不足していますか？私はrc4を使用しています。

どんな助けでも素晴らしいでしょう。

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

}

テンプレート駆動フォーム.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>

パッケージ.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)」である必要があります。