Angular - TextArea with Multiple Binding

Question

I have two input field ("name" and "city") and one textarea on my screen. Text area is filled up with some JSON data and data contains a few details like "name", "city", "address", "pin code" etc.

How do I only update "name" or "city" inside textarea when user type something on "name" or "city" input fields.

Is there something to do multiple bindings with textarea ?

Any help would be appreciated.

Not understand properly....can you create a stackbliz demo for it ! — Dako patel, Mar 22 '21 at 05:27

score 2 · Accepted Answer · answered Mar 22 '21 at 05:53

There is no multiple binding available for such a scenario, however, you can parse the json every change event, and update relevant fields:

see demo

@Component({
  selector: "hello",
  template: `
    <textarea (change)="updateObj()" [(ngModel)]="objJson"></textarea>
    {{ obj | json }}
  `,
  styles: [
    `
      h1 {
        font-family: Lato;
      }
    `
  ]
})
export class HelloComponent {
  obj = {
    name: "John",
    city: "Chicago"
  };

  objJson: string;

  constructor() {
    this.objJson = JSON.stringify(this.obj);
  }

  updateObj() {
    const tempObj = JSON.parse(this.objJson);
    this.obj.name = tempObj.name;
    this.obj.city = tempObj.city;
    // also possible for a generic update:
    // Object.keys(this.obj).forEach(k => { this.obj[k] = tempObj[k]; });
  }
}

Thanks. I got my answer that there is no multiple binding available for such a scenario at the moment. — Kanchan, Mar 22 '21 at 06:43

Angular - TextArea with Multiple Binding

1 Answers1