Two-way binding in Angular 2 with NgModel and mutating bound property?

Question

I am using Angular 2 beta 5.

Here\'s my view:

Answer 1

For binding textarea values you can use the change-function:

Template

<textarea id="some-value" (change)="doTextareaValueChange($event)">{{textareaValue}}</textarea>

Component

export class AppComponent implements OnInit {
  private textareaValue = '';
  doTextareaValueChange(ev) {
    try {
      this.textareaValue = ev.target.value;
    } catch(e) {
      console.info('could not set textarea-value');
    }
  }
}

Answer 2

Update

Add ngDefaultControl

<paper-input ngDefaultControl [(ng-model)]="address">

See also https://github.com/angular/angular/issues/5360

**

I guess this is a current limitation of the ngModel implementation. It binds to the value field of the element but for textarea it's the text AFAIR field it should bind to. It seems the textarea fires an event that ngModel listens to which makes it work in one direction.

You can work around this by implementing a custom ValueAccessor

See also
- ngModel custom ValuesAccessor
- Angular 2 custom form input
- Bind angular 2 model to polymer dropdown