CODEWITHSUNDEEP
angularangular-routingangular-router
Maihan Nijat
Maihan Nijat

Reputation: 9334

Why Angular Two-Way Binding doesn't work with parameter passed through routerLink?

I am passing the object through routerLink and updating the form input based on object properties. But when I change the content of the form input, the object properties don't update.

<input type="text" [(ngModel)]="center.id">
<input type="text" [(ngModel)]="center.name" placeholder="name">

<tr *ngFor="let center of centers">
  <td [routerLink]="['/add-center', center]">{{center.id}}</td>
</tr>

In the component:

center: Center;

constructor(private centerService: CenterService, private route: ActivatedRoute) {

}

Getting the parameter from the routerLink:

ngOnInit() {

  this.route.params.subscribe(center => {
    this.center = center;
  });
}

After submitting the form, I call the following method:

editCenter() {

  this.centerService.updateCenter(this.center)
    .subscribe(
      res => {
        console.log('Updated Successfully');
      },
      err => {
        console.log(err);
      })
  ;
  console.log(this.center);
}

The method prints the same properties for the object in the log. It doesn't update the properties of the object.

Tried to manually change the properties but got the following error:

TypeError: Attempted to assign to readonly property.

Upvotes: 0

Views: 593

Answers (2)

AVJT82
AVJT82

Reputation: 73337

Since we found out that this is indeed a form (with form tag)... As your code sits now, you should get an error in your console, since you haven't provided a name attribute for your fields. This you need to do if you are having a form.

<form #f="ngForm">
  <input type="text" [(ngModel)]="center.id" name="id">
  <input type="text" [(ngModel)]="center.name" placeholder="name" name="name">
</form>

Having the name attribute should update your model fine.

DEMO

Upvotes: 1

CozyAzure
CozyAzure

Reputation: 8468

this.centerService.updateCenter(this.center) is asynchronous. You will need to put your console inside the subscribe callback to see the changes.

editCenter() {
    this.centerService.updateCenter(this.center)
        .subscribe(
            res => {
                console.log('Updated Successfully');
                console.log(this.center);
            },
            err => {
                console.log(err);
            });
}

Upvotes: 0

Related Questions