代码之家 › 专栏 › 技术社区 › Imad El Hitti

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

ngx-bootstrap angular-reactive-forms directive typescript angular

0

Imad El Hitti · 技术社区 · 7 年前

我有一个使用ngx引导程序的输入和typeahead。

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

我的地址数据源如下所示:

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

问题是,当我选择一个值时,我想在输入中以完整地址显示所选的值,这很有用,但是输入的值应该只是示例中的邮政编码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);
  }

值也会改变,但输入中显示的值也会改变。

1 回复 | 直到 7 年前

1

0

Imad El Hitti 7 年前

好吧,我设法让它工作,以防它能帮助某人,这是指令代码:

constructor(private model: NgControl) { }

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

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

我不明白为什么它在思考之前不能和代码一起工作,如果有人有答案,我会更新我的答案。