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

我创建了一个简单的登录表单，用于查看输入数据在我的控制台中，但我得到一个空的对象。可以帮助我找出任何地方错误是无法在单击按钮后在控制台中看到表单数据，angular2

我的模板，

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

来源

2016-07-15 MMR

[安装前缀]（http://www.prefix.io/），它可能会帮助你看到问题，它一定会有帮助。 – Crowcoder

嗨Crowcoder它会工作的角度，因为它显示为.net – MMR

它与ASP.net作为一个HTTP处理程序，所以无论它是否有棱角或其他什么都没关系。你在使用ASP.net吗？我想我只是假设。 – Crowcoder

我在这里使用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>

希望，它适合你。其实它会:)

来源

2016-07-15 11:35:09

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

回答

相关问题