Angular2中的窗体控件有问题

我有以下组件和html模板来显示表单。它抛出以下错误：

异常：TypeError:无法读取中[signUpForm.controls['email']中未定义的属性“controls”SignupComponent@20：35]

不确定我需要做什么才能访问

toucted

功能？这段代码已经在其他地方工作过了，所以我不确定我需要做什么才能让它工作

import { Component, Inject, OnInit } from 'angular2/core';
import { Validators, FormBuilder, ControlGroup, Control } from 'angular2/common';

import { Router } from 'angular2/router';
import { UserService } from '../services/user.service';

@Component({
  selector: 'signup',
  templateUrl: 'client/dev/user/templates/signup.html',
  styleUrls: ['client/dev/user/styles/user.css'],
  providers: []
})

export class SignupComponent {
    title: string = "Sign Up";
    signupForm: ControlGroup;

  constructor( @Inject(FormBuilder) fb:FormBuilder, @Inject(UserService) private _userService: UserService, private _router: Router) {
    this.signupForm = fb.group({
      "firstName": ["", Validators.required],
      "lastName": ["", Validators.required],
      "email": ["", Validators.required],
      "password": ["", Validators.required]
    });
  }
  onSubmit(details):void {
    console.log("on Submit here");
    this._userService.signUp(details)
    .subscribe((result) => {
      if (result) {
        console.log("Link to Todo?");
        this._router.navigate(['LoginComponent']);
      }
    });
  }
}

signup.html：

        <div class="form-group">
            <label for="signUp-email">Email</label>
            <input type="text" [ngFormControl]="signUpForm.controls['email']" #email="ngForm" class="form-control" id="signUp-email">
        </div>
        <div *ngIf="email.control.hasError('required') && email.control.touched" class="alert alert-danger">
            Email is required
        </div>
        <div *ngIf="email.control.hasError('email') && email.control.touched" class="alert alert-danger">
            Email is invalid
        </div>

电子邮件
电子邮件是必需的
电子邮件无效

更新：

        <div class="form-group">
            <label for="signUp-email">Email</label>
            <input type="text" [ngFormControl]="signUpForm?.controls['email']" #email="ngForm" class="form-control" id="signUp-email">
        </div>
        <div *ngIf="email.control.hasError('required') && email.control.touched" class="alert alert-danger">
            Email is required
        </div>
        <div *ngIf="email.control.hasError('email') && email.control.touched" class="alert alert-danger">
            Email is invalid
        </div>

电子邮件
电子邮件是必需的
电子邮件无效

signUpForm？。控件['email']

，与其他控件一样，它们将抛出相同的错误消息。并且在

中将
signUpForm
更改为
signUpForm
。ts

@EricMartinez问题是更新您的意思吗？它仍然不起作用…@GeorgeEdwards是的，这就是我的意思。您还必须按照A_Singh的建议执行，该属性与模板中的名称不匹配。它现在可以工作了吗？

signUpForm？。控件['email']

，其他控件也一样，他们将抛出相同的错误消息。并且在

中将
signupForm
更改为
signupForm
。ts

@EricMartinez问题是更新您的意思吗？它仍然不起作用…@GeorgeEdwards是的，这就是我的意思。您还必须按照A_Singh的建议执行，属性与模板中的名称不匹配。它现在可以工作了吗？