Issue with prepopulating ng-bootstrap's typeahead whilst relying on model driven forms

Question

Suppose I have the following model driven form:

this.addressForm = this.formBuilder.group({
  address: this.formBuilder.group({
    placeId: [this.address.placeId],
    description: [this.address.description]
  })
});

And the following template:

<form [formGroup]="addressForm" (ngSubmit)="updateAddress()" novalidate>
  <div class="form-group">
    <div class="input-group">
      <input type="text"
         formControlName="address"
         placeholder="Type in you address"
         [ngbTypeahead]="chooseAddress"
         [inputFormatter]="addressFormatter"
         [resultFormatter]="addressFormatter"
         autocomplete="off"
         class="form-control">
    </div>
   ...
</form>

the addressFormatter:

addressFormatter = param => param.description;

Say the address is an object with two properties: placeId and description.

It seems impossible to deal with a formGroup (here the address) instead of a formControl ( here the address.placeId) and still pre populate the form with one of the object's properties (e.g. address.description).

I get the following error:

Error in ./UserAccountAddressComponent class UserAccountAddressComponent - inline template:8:9 caused by: control.registerOnChange is not a function TypeError: control.registerOnChange is not a function

I was not able to display one property of the object in the field (the address.description) and use another one when I submit the form (address.placeId) while still being able to prepopulate the form with one of the object properties (here the address.description).

Can someone please help?

Answer 1

The issue was in the way I specified my reactive form.

Changing from:

this.addressForm = this.formBuilder.group({
  address: this.formBuilder.group({
    placeId: [this.address.placeId],
    description: [this.address.description]
  })
});

...to:

this.addressForm = this.formBuilder.group({
  address: this.formBuilder.control({//Notice the control() method instead of group() method
    placeId: this.address.placeId,
    description: this.address.description
  })
});

...allowed my to specify an object type instead of a string type for the whole input control. See official angular documentation for FormBuilder control() method here: https://angular.io/docs/ts/latest/api/forms/index/FormBuilder-class.html#!#control-anchor

edit: Please note that this has nothing to do with the ng bootsrap framework.

Answer 2

I guess your error means the component binded with your input does not implements ControlValueAccessor interface. Try to add a [formControl] binding to your input :

<form [formGroup]="addressForm" (ngSubmit)="updateAddress()" novalidate>
  <div class="form-group">
    <div class="input-group">
      <input type="text"
         formControlName="address"
         [formControl]="addressForm.address"
         placeholder="Type in you address"
         [ngbTypeahead]="chooseAddress"
         [inputFormatter]="addressFormatter"
         [resultFormatter]="addressFormatter"
         autocomplete="off"
         class="form-control">
    </div>
   ...
</form>