Angular ControlValueAccessor onChanges not updating form control value

Question

Here is the stackblitz of the component/problem reproduced.

I've built a custom input component that:

takes an array of user objects for typeahead filtering
displays your selections as tags
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?

nash11 · Accepted Answer · 2019-05-29 17:48:38Z

1

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.

answered May 29, 2019 at 17:48

nash11

8,7503 gold badges23 silver badges58 bronze badges

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

Collectives™ on Stack Overflow

Angular ControlValueAccessor onChanges not updating form control 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