I am currently working on multiple parent components that utilize template-driven forms:
user-data.components.ts
admin-data.components.ts
customer-data.components.ts
Each of these parent components have form elements that are child components utilizing NG_VALUE_ACCESSOR:
app-input.component.ts
These child components are bound in each parent component like so:
<app-input name="xxxx" [(ngModel)]="yyyy" ....></app-input>
Additionally, each parent component contains default fields such as firstName and lastName
For these default fields, I am planning to create an additional component: default-fields.component.ts with firstName and lastName:
<app-input name="firstName" [(ngModel)]="yyyy" ....></app-input>
<app-input name="lastName" [(ngModel)]="yyyy" ....></app-input>
in order to add it once in all the parent components.
My current challenge is that I am able to pass the ngModel from app-input.component.ts to default-fields.component.ts, but not to a deeper level, like user-data.components.ts
In default-fields.component.ts, I am using viewProviders: [] like so:
@Component({
selector: .....,
templateUrl: .....,
viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]
})
Am I approaching this concept incorrectly? Or am I simply implementing it in the wrong way?