Associazione bidirezionale in Angular 2 con NgModel e proprietà con restrizioni mutanti?

Question

Sto usando angolare 2 beta 5.

Ecco mio punto di vista:

<textarea [(ngModel)]="pendingMessage" (keydown.enter)="sendMessage()"></textarea> 

Ed ecco la mia componente:

@Component({ 
    //... 
}) 
export class AppComponent { 
    private _pendingMessage: string; 

    public get pendingMessage() { 
     return this._pendingMessage; 
    } 

    public set pendingMessage(value: string) { 
     this._pendingMessage = value; 
    } 

    constructor() { 
     this.pendingMessage = "initial stuff"; //this shows up in the text field initially 
    } 

    public sendMessage() { 
     console.log(this.pendingMessage); //here, pending message is indeed whatever I typed in the text field 
     this.pendingMessage = "blah"; 
     //here I expected the textfield to now contain "blah", but it doesn't 
    } 
} 

L'intero concetto di questo legame a doppio senso sembra funzionare tutto apposto. Quando digito del testo nel campo e premo invio, posso vedere che pendingMessage è effettivamente qualunque cosa ho digitato nel campo.

Tuttavia, nella riga seguente, dove provo a impostare pendingMessage su "blah", mi aspettavo anche che questo aggiornasse il campo di testo per contenere "blah". Perché non è così? Non è questo il punto delle associazioni a doppio senso?

So che Angular 2 non può sapere magicamente quando i valori cambiano, ma speravo che avrebbe fatto un controllo sporco dopo aver valutato l'evento. C'è un modo per farlo fare una cosa del genere automaticamente o in qualche modo raccogliere il cambiamento? Vorrei evitare di usare apply.

Answer 1

Aggiornamento

Aggiungi ngDefaultControl

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

Vedi anche https://github.com/angular/angular/issues/5360

**

Credo che questa è una limitazione corrente del ngModel attuazione. Si lega al campo value dell'elemento ma per textarea è il campo AFAIR text a cui deve essere associato. Sembra che lo textarea emetta un evento che ascolta ngModel che lo fa funzionare in una direzione.

È possibile aggirare questo mediante l'attuazione di una consuetudine ValueAccessor

Vedi anche
- ngModel custom ValuesAccessor
- Angular 2 custom form input
- Bind angular 2 model to polymer dropdown

Answer 2

Per i valori textarea vincolante è possibile utilizzare il cambiamento di funzione:

Modello

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

Componente

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