Within my view component, I am fetching data from a service and setting it as a property. Custom components then use these fields to display the data. Everything seems to be working fine so far.
<app-textbox [caption]="'First name'"
[value]="data.name.first"></app-textbox>
ngOnInit() {
this.service.getData()
.subscribe(res => this.data = res);
}
However, when I try to edit the content within the custom components, I noticed that the original model isn't being updated. After some research, I attempted to implement two-way binding using banana-box notation but unfortunately, the changes were not reflected in the original model.
<app-textbox [caption]="'First name'"
[(value)]="data.name.first"></app-textbox>
I also tried using ngModel, but this resulted in an error message stating "No value accessor for form control with unspecified name attribute." The Angular documentation gave me a general idea of how it should work, but I need more detailed guidance.
<app-textbox [caption]="'First name'"
[(ngModel)]="data.name.first"></app-textbox>
I'm seeking help to pinpoint where I may be going wrong. Do I need to emit the value out from the custom component? Should I be using a form structure? At this point, my only solution is to manually label all controls and collect the values, which I know is not a good practice.