Angular 2當我提交表單時，數據即將變空

我是Angular 2的新手，剛剛學完Angular 1x，然後我知道它已經增加了它的版本。Angular 2當我提交表單時，數據即將變空

我的問題是我沒有收到有關組件的數據。

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); 

    } 
}

我使用打字稿

來源

2017-07-28 josh

**沒有獲取組件**上的數據意味着什麼？你有一些你想要顯示的默認值嗎？ – Alex

試試這個在您的模板：

<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';

來源

2017-07-28 02:20:18

我覺得角2是角1不同，你需要從(ngModel)有點改變[(ngModel)]

ngModule指令所屬到FormsModule那麼你必須輸入FormsModule到你的應用程序

Yo烏爾tests.module.ts

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

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

你teste.component.ts變化pessoa在HTML模板對象pessoa = {};訪問Nome和Email

export class TesteComponent{ 
    pessoa = {}; 

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

最後，你的HTML模板改了一下這個

[(ngModel)]="pessoa.Nome" 

[(ngModel)]="pessoa.Email"

這它。我希望這對你有幫助。

來源

2017-07-28 02:37:10 Phonbopit

Angular 2當我提交表單時，數據即將變空

回答

相關問題