Angular 将组件对象绑定到表单元素

我在angular2中创建了模型驱动表单，我在html模板中创建了具有相同名称指令的对象，但不知何故出现了错误，如下图所示：

postmessage.component.ts：

import { Component } from '@angular/core';
import {FormControl,FormGroup,FormBuilder,Validators} from '@angular/forms';

@Component({
    moduleId:module.id,
    selector: 'post-message',
    templateUrl: '../../templates/postmessage.component.html'
})
export class PostComponent {
    form = new FormGroup({
        username:new FormControl('',Validators.required),
        email:new FormControl('',Validators.required)
    })
    signup(){
        console.log(this.form.value);
    }
 }

postmessage.component.html：

<form class="from-horizontal" [formGroup]="form" (ngSubmit)="signup()">
    <div class="form-group row">
        <label for="username" class="control-label col-md-2">Name:</label>
        <div class="col-md-6">
            <input type="text" id="username"  class="form-control" formControlName="username">
            <div class="alert alert-danger"
            *ngIf="!form.controls['username'].valid"
            >
                User name is required.
            </div>
        </div>
    </div>
    <div class="form-group row">
        <label for="email" class="control-label col-md-2">Email:</label>
        <div class="col-md-6">
            <input type="email" id="email" class="form-control" formControlName="email">
        </div>
        <div class="alert alert-danger"
        *ngIf="!from.controls['email'].valid"
        ></div>
    </div>
    <div class="form-group row">
        <label for="" class="control-label col-md-2"></label>
        <div class="col-md-6">
            <input type="submit" class="btn btn-primary">
        </div>
        </div>
</form>

姓名：
用户名是必需的。
电邮：

你怎么能修好它

form = new FormControl({

应该是

form = new FormGroup({

---

是的，我理解你的观点，但仍然有困难，我知道这个错误是什么意思？我到底想告诉你什么？from的

是
未定义的
，但是
表单
可以；-）（第二个
*ngIf=“！from.controls['email'].valid”
）这是我最后一条要自杀的消息：）谢谢你兄弟你帮我写了我的前一篇文章（Ty4HelpDude）真的很感谢你的帮助我也在谷歌上关注你..不客气：）很高兴听到你能成功。