角度2私がフォームを提出すると、データが空になります

Question

私はAngular 2に本当に新しく、ちょうどAngular 1xを学び終わった後、バージョンが増えたことを知っていました。

私の問題は、コンポーネントのデータが取得できないということです。

HTML：

<div class="container"> 
<h1 class="text-center"> Cadastro Teste </h1> 
<form (submit)="cadastro($event)" > 

    <div class="row"> 
     <div class="col-lg-12"> 
     <div class="form-group"> 
      <label> Nome : </label> 
       <input type="text" (ngModel)="pessoa.Nome" name="Nome" class="form-control"/> 
      </div> 
    </div> 
</div> 

    <div class="row"> 
     <div class="col-lg-12"> 
     <div class="form-group"> 
      <label> Email : </label> 
       <input type="text" (ngModel)="pessoa.Email" name="Email" class="form-control"/> 
      </div> 
    </div> 
</div> 

    <div class="row"> 
    <div class="col-lg-12"> 
     <input type="submit" value="Cadastrar" class="btn btn-primary" /> 
    </div> 
    </div> 

</form>  
</div> 

コンポーネント：

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


@Component({ 
    moduleId : module.id, 
    selector : 'teste', 
    templateUrl : './teste.component.html' 

}) 
export class TesteComponent{ 


    pessoa; 

    cadastro(event){ 

     event.preventDefault(); 

     console.log(this.pessoa); 

    } 
} 

私は活字体に

Answer 1

を使用しているテンプレートでこれを試してください：あなたのコンポーネントで

<form #form="ngForm" (submit)="cadastro($event, form)" > 
</form> 

をあなたの関数を変更これまで：

cadastro(event:Event, form: NgForm): void { 
    console.log('form data', form.value); 
... 
} 

トップにNgFormのインポートを追加します。

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

Answer 2

は、私はあなたが所属[(ngModel)]

ngModuleディレクティブに(ngModel)からのビットを変更する必要がある2は、角度1と異なる角度だと思いますFormsModuleには、FormsModuleをアプリにインポートする必要があります。

HTMLテンプレートにアクセスNomeとEmailためpessoa = {};

export class TesteComponent{ 
    pessoa = {}; 

    cadastro(event){ 
    event.preventDefault(); 
    console.log(this.pessoa); 
    } 
} 

オブジェクト、そして最後に、あなたのHTMLテンプレートは、この

[(ngModel)]="pessoa.Nome" 

[(ngModel)]="pessoa.Email" 

にビットを変更するにはウルtests.module.ts

import { FormsModule } from '@angular/forms'; 

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule // <--- import here 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 

あなたteste.component.ts変更pessoaそれ。私はあなたに役立つことを願っています。