angular - ngModel on NbDialog is read only?

Question

I want to open a Dialog from a component by clicking a button, and pass some data to the dialog. When closing the dialog, I want the data to return to the parent component to be sent to a server.

In my parent component I have:

<ng2-smart-table 
  [settings]="settings" 
  [source]="data"                
  (editConfirm)="onEditRowSelect($event)">
</ng2-smart-table>
 
onEditRowSelect(event) {

  this.dialogService.open(MyDialogComponent, {
  context: {
    title: 'Dialog Title',
    data: this.data // this is an Object
  },
  });
}

My dialog is in another component:

  @Input() title: string;
  @Input() data: any;

  constructor(protected ref: NbDialogRef<MyDialogComponent>) {
    console.log(data)
  }

  cancel() {
    this.ref.close();
  }

  submit() {
    this.ref.close({ newData: data });
  }

<nb-card>
....
  <div>
    <input #name type="text" nbInput placeholder="Name" [(ngModel)]="data.user.name">
  </div>
....
</nb-card>
<!-- TEST
<pre>{{data | json}}</pre>
-->

So, the input is prefilled with the "name" that's coming from the parent component, but when I try to modify the name, the "data" model does not change, and I get an error like:

Cannot assign to read only property 'name' of object '[object Object]'

I made it work by deep cloning the Object "data" and using that as the ngModel, then sending it back to the parent as newData... but.. I really don't like this solution, it cannot be the right way to do this.

Any help? THank you

question from:https://stackoverflow.com/questions/65942636/ngmodel-on-nbdialog-is-read-only

Answer 1

Waitting for answers