绑定组件对象形成

Question

我在angular2创建的模型驱动的表单元素，我创建具有相同名称的指示对象在HTML模板，但不知何故没有被抛出如下PIC错误：

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> 

如何解决？

Answer 1

form = new FormControl({ 

应该

form = new FormGroup({