2016-11-06 9 views
1

以下のコードを参照してください。入力値が変更されると、textchange関数が呼び出されます。ただし、InputMaskComponentのtextプロパティは変更されません。私のコードに何が間違っているのか分かりません。入力要素の角2デュアルデータバインディングが機能しない

InputMaskComponent.ts

import { Component, ViewChild, AfterViewInit, ElementRef, Attribute } from '@angular/core'; 

@Component({ 
    selector:'inputs:mask', 
    templateUrl:'InputMaskComponent.html' 
}) 
export class InputMaskComponent{ 
    pattern: string; 
    text: string; 
    dom: Element; 
    constructor(el:ElementRef, @Attribute('pattern') pattern:string){ 
     this.dom = el.nativeElement; 
     this.pattern = pattern; 
    } 
    textchange(event:any){ 
     console.log(this.text, event); 
    } 

} 

InputMaskComponent.html

<div> 
    <input type="text" 
      [placeholder]="pattern" 
      (input)="textchange($event)" 
      [(value)]="text" /> 
    <span #child class="hidden"><ng-content></ng-content></span> 
</div> 

RootComponent.html

<input:mask pattern="(###) ### - ###">(012) 345 - 678</input:mask> 
+1

「入力」、「[(値)]」とは何ですか?なぜあなたは '[(ngModel)]'を使わないのですか? – micronyks

+0

私は同意します。なぜあなたは '[(ngModel)]を使わないのですか? – yurzui

+0

@micronyksと@yurzuiは正しいですが、双方向バインディングのために 'NgModel'ディレクティブを使うべきですが、' [ngModel] 'と'(ngModelChange) 'の2つの部分に分割する必要があります。入力が変わると機能します。 '[(値)]を' [ngModel] 'と'(入力) 'で'(ngModelChange) 'に置き換えると、すべてが魅力的に機能します。 –

答えて

0
[(value)]="text" 

あなたは<input>要素のvalueプロパティにコンポーネントクラスの

  • textプロパティをバインドすることを意味し
  • イベントハンドラtext = $event

しかし<input>要素doesnのにvalueChangeイベントvalueChangeイベントを送出しません。

も参照してください。https://angular.io/docs/ts/latest/guide/template-syntax.html#!#two-way

関連する問題