角度 – 在依赖模型驱动形式的同时预先填充ng-bootstrap的预先输

发布时间：2020-12-14 05:01:09 所属栏目：百科来源：网络整理

导读：假设我有以下模型驱动形式： this.addressForm = this.formBuilder.group({ address: this.formBuilder.group({ placeId: [this.address.placeId],description: [this.address.description] })}); 以下模板： form [formGroup]="addressForm" (ngSubmit)="up

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

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：

addressFormatter = param => param.description;

假设地址是一个具有两个属性的对象：placeId和description.

似乎不可能处理formGroup(这里是地址)而不是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).

有人可以帮忙吗？

解决方法

我猜您的错误意味着与您的输入绑定的组件未实现 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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!