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

  }
}

我正在使用TypeScript

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

我认为Angular 2与Angular 1不同，您需要将某位从(ngModel)更改为[(ngModel)]

ngModule指令属于FormsModule，那么您必须将FormsModule导入您的应用

您的tests.module.ts

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

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

您的teste.component.ts更改pessoa对象pessoa = {};以便在html模板中访问Nome和Email

export class TesteComponent{
  pessoa = {};

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

最后，你的html模板稍微改变了一下

[(ngModel)]="pessoa.Nome" 

[(ngModel)]="pessoa.Email"

那就是它。我希望这对你有帮助。

Angular 2当我提交表单时，数据将变空

2 个答案: