Question

我有一个使用ngx-bootstrap提前输入的输入。

<input type="text" class="form-control with-icon" placeholder="Address ..."
      formControlName="address" [typeahead]="addressDataSource"  typeaheadOptionField="fullAddress" />

我的addressDataSource看起来像这样：

[
  {
    id: '1',
    fullAddress: '44000 - Nantes'
  },
  {
    id: '2',
    fullAddress: '77400 - Paris'
  }
 ....
]

问题是当我选择一个值时，我想在输入中显示fullAddress中选定的值，该值很好用，但是在此示例中，输入的值应仅为邮政编码44000或77400。

我试图制定这样的指令：

constructor(private model: NgControl) { }

  @HostListener('input') inputChange() {
    const newValue = this.model.value.split(' ')[0];
    this.model.control.setValue(newValue);
    this.model.valueAccessor.writeValue(this.model.value);
  }

值更改以及输入更改中显示的值。

Answer 1

好吧，我设法使它起作用，以防万一，这是指令代码：

constructor(private model: NgControl) { }

  @HostListener('input') inputChange() {
    const newValue = this.model.value.split(' ')[0];

    this.model.control.setValue(newValue, {
        emitEvent: false,
        emitModelToViewChange: false
      });
  }

我不明白为什么它无法与代码一起工作，如果有人知道答案，我会更新我的答案。

角度5-具有不同值的输入视图

1 个答案: