Angular 2表单返回空值

时间:2016-12-29 19:25:01

标签: javascript angular angular2-forms

我在Angular 2中有这个简单的表单。我想收到电子邮件并通过,但我得到一个空对象。

login.component.html

<div class="container">
  <form #formData='ngForm' (ngSubmit)="onSubmit(formData)">
    <div class="form-group row">
      <label for="inputEmail" class="col-sm-2 col-form-label">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="inputEmail" placeholder="Email" (ngModel)="email" required>
      </div>
    </div>
    <div class="form-group row">
      <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="inputPassword" placeholder="Password" (ngModel)="password" required>
      </div>
    </div>
    <div class="form-group row">
      <div class="offset-sm-2 col-sm-10">
        <button type="submit" class="btn btn-primary" [disabled]="!formData.valid">Sign in</button>
        <a routerLink="/signup">Don't have an account?</a>
      </div>
    </div>
  </form>
</div>

auth.component.ts

@Component({
  templateUrl: 'app/auth/login.component.html'
})
onSubmit(formData) {
      console.log(formData.value);
  }

1 个答案:

答案 0 :(得分:1)

this.emailthis.password ngModel已包含您需要的信息。

onSubmit(formData) {
      console.log(this.email, this.password);
}