2017-02-15 5 views
0

私はカレンダーディレクティブを使用して、日付を渡して、親コンポーネントの日付も更新したいと思っています。 ngModelでうまく動作しますが、formControlで試してみると、親のコンポーネントデータは更新されません。Angular2 Input/Output in formControl代わりにngModel

// Model value is updating: 
<input [(ngModel)]="data" /> 
<calender [(currentDate)]="currentDate" ></calender> 

// FormControl value is not updating: 
<form [formGroup]="myForm"> 
<input formControlName="date" /> 
<calender [(currentDate)]="myForm.controls.date.value" ></calender>` 
</form> 

カレンダーコンポーネントのコードスニペット:

@Input() currentDate:string; 
@Output() currentDateChange: EventEmitter<string> = new EventEmitter<string>(); 
updateOutput(){ this.currentDate="someDate" this.currentDateChange.emit(this.currentDate); } 
+0

と入力すると、親日付は最新の状態に保たれます。カレンダーのコードを見ずに言うのは難しいですが、ControlValueAccessorインターフェイスを実装していない可能性があります。この記事は、カスタムコントロールを作成するのに適しています。https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html – Zyga

+0

[(formGroup)]バインディングの使用を試してください

要素 –

+0

親テンプレートで、 'myForm.get( 'date')。value'でフィールド値にアクセスしてみてください。また、新しい構文に切り替えたときに、あなたのモジュールに 'ReactiveFormsModule'をインポートすることを考えましたか?コンポーネントクラスでフォームモデルを作成しましたか? – AngularChef

答えて

0

あなたは出力を必要としない は、以下のコードです。あなたが[(ngModel)]

+0

[(ngModel)]コードは正常に動作していますが、formControlを使用している場合は、formControl値を更新していません –

+0

質問にはさらに詳しい情報が必要です – ZanattMan

関連する問題