0

I am trying to do validation of child, then grandchild components in a template driven form. When I use:

viewProviders: [{ provide: ControlContainer, useExisting: NgForm }]

In the child and grandchild components to extend my form, validation works. However, in my grandchild component, when I use an @Output/event emitter for changes within the control, I find that as the values change, they change on ALL components.
I thought maybe I had wired up my models incorrectly, but I even found this to happen on a grandchild control WITH NO model bindings.

Has anyone else experienced this? If so is this an actual bug and how did you get around it? Changing the values in the text boxes themselves work great, it just seems like an issue with EventEmitters and changing the values specifically.

Travis L. Riffle
  • 136
  • 2
  • 5

1 Answers1

0

For anyone that runs across this - it was because the control names were not unique. As an example, the name of my address1 input was "Address1." This name was duplicated across the app and therefor caused issues.

To solve this, I did something like the following but instead of "id" I used the "name" attribute: Duplicate "id" attribute in Angular 2 component

Travis L. Riffle
  • 136
  • 2
  • 5