反应形式上的 ng2-auto-complete 默认选择

Question

我在我的 Angular 5 应用程序上使用 https://www.npmjs.com/package/ng2-auto-complete，这就是我输入的方式

HTML:

<input
          id="shipper"
          type="text"
          class="form-control"
          formControlName="shipper"
          auto-complete
          [source]="searchShipper.bind(this)"
          value-formatter="name"
          list-formatter="(id) name"
          (valueChanged)="onShipperSelected($event)"
          autocomplete="off"
        />

现在我需要在不使用 [(ngModel)] 的情况下 select 一个默认值，因为在 Angular 中不推荐使用 formControlName 6。它在我使用时有效：

[(ngModel)]="defaultValue"

当我尝试使用 patchValue 设置默认值时：

const obj = {id: '1', name: 'test'};

this.form.patchValue({
  shipper: obj.toString()
});

或

const obj = {id: '1', name: 'test'};

this.form.patchValue({
  shipper: obj
});

它在输入字段上显示 [object Object]，有什么方法可以在反应形式上解决这个问题？

Answer 1

我认为您误解了 value-formatter 的目的。这是来自 docs 的示例：

myValueFormatter(data: any): string {
  return `(${data[id]}) ${data[value]}`;
}

如果您想定义要显示的对象属性，您应该使用 display-property-name。

这是工作 example。

反应形式上的 ng2-auto-complete 默认选择

ng2-auto-complete default selection on reactive form

autocomplete

angular

angular-reactive-forms