Ben Racicot
Ben Racicot

Reputation: 5895

Angular ControlValueAccessor onChanges not updating form control value

Here is the stackblitz of the component/problem reproduced.

I've built a custom input component that:

  1. takes an array of user objects for typeahead filtering
  2. displays your selections as tags
  3. form control value is an array of the selected users users[]

The issue is that adding a result (input-tags.component) does not update the form (app.component) and I can't understand why.

input-tags.component.ts

addTag(contact: any) {
   ...
   this.onChange(this.tags); // update controller value
}

app.component.ts

this.form.controls['users'].valueChanges.subscribe(data => {
  this.control = data; // always null
});

onChanges is called as expected and everything works fine except the form control is always null. Why?

Upvotes: 3

Views: 2022

Answers (1)

nash11
nash11

Reputation: 8650

The error seems to be in your addTag() function. You're trying to access a parameter that doesn't exist in your typeaheadSource. Change the contact.userId to contact.id and you should be good to go.

Upvotes: 1

Related Questions