I am having trouble implementing model driven forms in angular2. I am working on a third party autocomplete component by NgPrime. The component is fine and i implemented it perfectly using template driven forms but i want to use it with model driven forms. I get the following error and cannot resolve it.
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],
}),
});
}
}