Formulardaten erscheinen 2 Mal in der Konsole mit einem Klick

Question

Ich versuche ein Login-Formular zu erstellen, aber es zeigt die Formularwerte 2 mal in der Konsole mit einem Klick und ich bin nicht sicher, wo der Fehler war, kann jemand den Fehler finden. ...

meine Vorlage

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> 
    </div> 

meine Komponente

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

ich versuche, ein Login-Formular zu erstellen, aber es zeigt die Form Werte 2 mal in der Konsole auf einen Klick, und ich bin nicht sicher, wo die e rror war kann jemand den Fehler finden ....

Answer 1

Ich glaube, Sie deaktivieren müssen die alten Formen Modul

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

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

und Import formularbezogene Sachen nur aus @angular/forms statt @angular/common