Angular2

Question

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

  

EXCEPTION：TypeError：无法读取属性＆＃39;控件＆＃39;在[SignupComponent @ 20：35中的[signUpForm.controls [＆＃39; email＆＃39;]]中未定义的

不确定我需要做什么才能访问touched功能？这段代码在其他地方有用，所以不确定我需要做什么才能让它起作用？

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>