在依赖模型驱动表单时预先填充 ng-bootstrap 的预输入问题

Question

假设我有以下模型驱动形式：

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

以及以下模板：

<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 = param => param.description;

假设 address 是一个具有两个属性的对象：placeId 和 description。

似乎不可能处理 formGroup（这里是 address）而不是 formControl（这里是 address.placeId）并且仍然预填充表单对象的属性之一（例如 address.description）。

我收到以下错误：

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

我无法在字段中显示对象的一个属性（address.description），而在我提交表单时使用另一个对象（address.placeId）能够使用对象属性之一预填充表单（此处为 address.description）。

有人可以帮忙吗？

Answer 1

我猜你的错误意味着与你的输入绑定的组件没有实现 ControlValueAccessor interface。尝试向您的输入添加 [formControl] 绑定：

<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>

Answer 2

问题出在我指定反应形式的方式上。

更改自：

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

...至：

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
  })
});

...允许我为整个输入控件指定对象类型而不是字符串类型。请在此处查看有关 FormBuilder control() 方法的官方 angular 文档：https://angular.io/docs/ts/latest/api/forms/index/FormBuilder-class.html#!#control-anchor

编辑：请注意，这与ng bootsrap框架无关。

在依赖模型驱动表单时预先填充 ng-bootstrap 的预输入问题

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

angular2-forms

ng-bootstrap

angular