2016-09-06 13 views
0

私はangular2に慣れていて、学習しています。次のコードは、f.valueをコンソールに出力しません。空のオブジェクトを返します。私はここで何かを逃していますか私はrc4を使用しています。角度2 - 値のプロパティを取得していないフォームの提出

どのようなヘルプも素晴らしいでしょう。

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

} 

テンプレート従動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", 
} 
+0

これはAngular 2 Formsの素晴らしいビデオです。モデルとテンプレート駆動バージョンの違い - 学習目的のウォッチに値するhttps://youtu.be/E92KS_YCSf8 – bUKaneer

+0

ありがとうございます。私は見てみましょう –

答えて

0

"onSubmit(f.value)"にする必要があります。

関連する問題