在控制台中获得相同的值2次,angular2

时间:2016-07-01 06:31:24

标签: html angular

当我在控制台中看到来自表单的数据时,它会得到两次

我的模板

   <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 type="submit"  class="btn btn-default">Submit</button>
    <a [routerLink]="['/signup']">Click here to Signup</a>
</form>
</div>

我的组件,

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

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

 })
 export class Login {

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

 onSubmit(form:any) {

   console.log(form);
 }
  }

我的控制台,

 Object {email: "andrew@gmail.com", phone: "getiyt"}
 Object {email: "andrew@gmail.com", phone: "getiyt"}

当我看到来自控制台中的表单的数据时,它会得到两次,因此我不确定为什么会这样,因此我的数据库也会被单个记录填充2次。有人找到我的位置我错了。

1 个答案:

答案 0 :(得分:1)

在你的main.ts中你必须设置:

import {disableDeprecatedForms, provideForms} from '@angular/forms';

bootstrap(AppComponent, [disableDeprecatedForms(), provideForms()]);

这解决了这个问题。看到这个plunker:http://plnkr.co/edit/uiYZkEWMyXWOkglHZu6N

另请参阅官方文档:https://angular.io/docs/ts/latest/guide/forms.html

信用:Roberto Simonetti answer在这里。