The problem with preloading ng-bootstrap while relying on model forms

Question

Suppose I have the following managed model:

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> 

addressFormatter:

addressFormatter = param => param.description;

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

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

I get the following error:

Error. / UserAccountAddressComponent class UserAccountAddressComponent - built-in template: 8: 9 called: control.registerOnChange is not a function TypeError: control.registerOnChange is not a function

I was unable to display one property of the object in the field ( address.description ) and use another when I submit the form ( address.placeId ), while still having the opportunity to pre-fill the form with one of the property objects (here address.description ).

Can anybody help?

Answer 1

The problem was how I indicated my reactive form.

The change:

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

... in:

 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 me to specify the type of the object instead of the string type for the entire input control. See the angular white papers for the FormBuilder () control method here: https://angular.io/docs/ts/latest/api/forms/index/FormBuilder-class.html#!#control-anchor

to change . Note that this has nothing to do with the ng bootsrap infrastructure.

Answer 2

I assume that your error means that the component associated with your input does not implement the ControlValueAccessor interface . Try adding the [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>