Angular 5 - Input view with different value

Question

I have an input with typeahead using ngx-bootstrap.

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

My addressDataSource look like this :

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

The problem is when I select a value, I want to show in the input the selected value in fullAddress which work great, but the value of the input should be only the postal code which is 44000 or 77400 here in the example.

I tried to make a Directive like this :

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

The value change but also the value showed in input change as well.

Imad El Hitti · Accepted Answer · 2018-07-23 12:13:12Z

1

Okay I managed to make it work, in case it would help someone, here is the directive code :

constructor(private model: NgControl) { }

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

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

I didn't get why it didn't work with the code before thought, if someone has the answer I'll update my answer.

answered Jul 23, 2018 at 12:13

Imad El Hitti

9473 gold badges10 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 5 - Input view with different value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related