Question

我创建了一个简单的登录表单，我用它来查看控制台中的输入数据，但我得到一个空对象。任何人都可以帮我找出错误的位置

我的模板，

 <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>
   <a  [routerLink]="['/demo/signup']" >Sign Up</a>

      <div class="col-md-9">
          <router-outlet></router-outlet>
      </div>
   </div>

我的组件，

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

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

 })
export class Login {

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

onSubmit(form:any) {

 console.log(form);
        }
        }

Answer 1

我在使用Angular2 rc4这是我的package.json

"dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "3.0.0-alpha.8",
     ...........
}

我在我的项目中更新了你的代码，它就像一个魅力。更新您的代码，如下所示 -

 <form [formGroup]="myForm"  
          (ngSubmit)="onSubmit(myForm.value)"  
          class="ui form">

      <div class="form-group"  
          [class.error]="!email.valid && email.touched">  
        <label for="emailInput">Email</label>  
        <input type="text"  
               id="emailInput"  
               placeholder="EMAIL"  
               [formControl]="email">  

      </div>
      <div>
         <!-- Do it for password too !-->
      </div>


      <div *ngIf="!myForm.valid"  
        class="ui error message">Form is invalid</div>

      <button type="submit" class="ui button">Submit</button>  
 </form>

希望，它适合你。实际上会:)“

单击按钮angular2后，无法在控制台中看到表单数据

1 个答案: