Question

我正在尝试创建一个登录表单，但它在控制台中一次单击显示表单值2次，我不确定错误在哪里可以找到错误....

我的模板

  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>

我的组件

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

我正在尝试创建一个登录表单，但它在控制台中一次单击显示表单值2次，我不确定错误在哪里可以找到错误....

Answer 1

我认为您需要禁用旧表单模块

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

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

并仅从@angular/forms而非@angular/common

导入与表单相关的内容

一次单击即可在控制台中显示表单数据2次

1 个答案: