无法使Angular2模型驱动的表单起作用

Question

我无法在angular2中实现模型驱动的表单。我正在为NgPrime的第三方autocomplete component工作。组件很好，我使用模板驱动的表单完美地实现它，但我想将它与模型驱动的表单一起使用。我收到以下错误，无法解决它。

HTML

<form [formGroup]="invoiceForm">
  <div class="form-group" >
    <label for="customer" class="control-label">Select Customer</label>
    <p-autoComplete formControlName="customer"  [suggestions]="filteredCustomers" (completeMethod)="searchCustomer($event)" (onSelect)="customerChange()" [size]="30" [minLength]="1" placeholder="Search Customer" field="fullName">
      <template let-customer>
        <div>Email : {{ customer.email }}</div>
        <div>Address : {{ customer.streetAddress }}</div>
        <div class="ui-helper-clearfix" style="border-bottom:1px solid #D5D5D5">
        <div style="font-size:18px;float:right;margin:10px 10px 0 0">{{customer.fullName}}</div>
        </div>
      </template>
    </p-autoComplete>
  </div>
</form>

myComponent.ts

{
    invoiceForm:FormGroup;
    customers:Customer[] = [];
    filteredCustomers:Customer[] = [];
    selectedCustomer:Customer;
    products:Product[];
    filteredProducts:Product[] = [];
    selectedProduct:any = null;
    invoiceProducts:any = [];
    constructor(private formBuilder:FormBuilder)
    {
        this.initForm();
    }
    ngOnInit()
    {
        Observable.forkJoin(this.customerService.getAll(),
            this.productService.getActiveProducts())
            .subscribe(
                success =>
                {
                    this.selectedCustomer = null;
                    this.customers = success[0];
                    this.defaultCustomer = this.customerService.getDefaultCustomer();
                    this.selectedCustomer = this.defaultCustomer;
                    this.products = success[1];
                    console.log(this.products);
                    //this.invoice.invoiceProducts = [];
                },
                ()=>{},
                ()=>
                {

                }
            );
    }
    searchCustomer(event)
    {
        this.filteredCustomers = [];
        for (let i = 0; i < this.customers.length; i++)
        {
            let customer = this.customers[i];
            if ((customer.firstName.toLowerCase().indexOf(event.query.toLowerCase()) == 0))
            {
                this.filteredCustomers.push(customer);
            }
        }
    }
    customerChange()
    {
        console.log("Changed");
    }

    initForm()
    {
        this.invoiceForm = this.formBuilder.group({
            customer: this.formBuilder.group({
                email: ['', Validators.required],
                streetAddress: ['', Validators.required],
                firstName: ['', Validators.required],
                lastName: ['', Validators.required],
                fullName: ['Muhammad Usman', Validators.required],
                id: ['', Validators.required],
                isDefault: ['', Validators.required],
                priceList: this.formBuilder.group({
                    id: ['', Validators.required],
                    isDefault: ['', Validators.required],
                    name: ['', Validators.required]
                }),
                type: ['', Validators.required],
            }),

        });
    }
}