ボタンをクリックした後にコンソールのフォームデータが表示されません

Question

私はコンソールで入力データを見るために使用する簡単なログインフォームを作成しましたが、空のオブジェクトを取得しています。エラーが

マイテンプレート、

<div class="login jumbotron center-block"> 
<h1>Login</h1> 
<form #form ="ngForm" (ngSubmit)="onSubmit(form.value)"> 
<div class="form-group"> 
    <label for="username">Username</label> 
    <input type="text" ngControl ="email" class="form-control" id="emailh" placeholder="Username"> 
</div> 
    <div class="form-group"> 
    <label for="password">Password</label> 
    <input type="password" ngControl ="phone" class="form-control" id="phoneh" placeholder="Password"> 
    </div> 
    <button class="btn btn-default">Submit</button> 

</form> 
    <a [routerLink]="['/demo/signup']" >Sign Up</a> 

     <div class="col-md-9"> 
      <router-outlet></router-outlet> 
     </div> 
    </div> 

私のコンポーネント、

 import { Component } from '@angular/core'; 
    import { Router, ROUTER_DIRECTIVES } from '@angular/router'; 
    import { CORE_DIRECTIVES } from '@angular/common'; 
    import { Http, Headers } from '@angular/http'; 
    import { contentHeaders } from '../headers/headers'; 
    import {FORM_DIRECTIVES,FormBuilder,FormGroup,Validators, REACTIVE_FORM_DIRECTIVES} from '@angular/forms'; 
@Component({ 

    directives: [CORE_DIRECTIVES,ROUTER_DIRECTIVES,FORM_DIRECTIVES,REACTIVE_FORM_DIRECTIVES], 
    templateUrl : "./components/login/login.html", 

}) 
export class Login { 

constructor(public router: Router, public http: Http) { 
} 

onSubmit(form:any) { 

console.log(form); 
     } 
     } 

Answer 1

である私はここAngular2のRC4を使用しています私のpackage.json

です

"dependencies": { 
    "@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-alpha.8", 
    ........... 
} 

私のプロジェクトであなたのコードを更新しました。それは魅力的です。下記のようにコードを更新してください -

<form [formGroup]="myForm" 
      (ngSubmit)="onSubmit(myForm.value)" 
      class="ui form"> 

     <div class="form-group" 
      [class.error]="!email.valid && email.touched"> 
     <label for="emailInput">Email</label> 
     <input type="text" 
       id="emailInput" 
       placeholder="EMAIL" 
       [formControl]="email"> 

     </div> 
     <div> 
     <!-- Do it for password too !--> 
     </div> 


     <div *ngIf="!myForm.valid" 
     class="ui error message">Form is invalid</div> 

     <button type="submit" class="ui button">Submit</button> 
</form> 

希望、それはあなたのために働きます。実際にそれは:)