2017-05-03 3 views
1

この入力要素は、Datepickerウィジェットです。 「09/09/1999」などの日付プロパティ値がテンプレートビューに読み込まれ、同じ日付が選択されたDatepickerカレンダーでは、期待どおりに機能します。コンポーネントからテンプレートへのバインドはOKです。角度2 ngModelはjQuery Datepickerウィジェット/入力要素の値を追跡/バインドできません。なぜですか?

Datepickerインタラクティブカレンダーで日付を変更すると、選択した日付が入力ボックスに表示されますが、コンポーネントのdateプロパティは更新されません。そして、(ngSubmit)= 'search(form.value)'を使用すると、フォームオブジェクトform.dateの値は以前と同じになります。

--template---  
<form #form='ngForm' (ngSubmit)='search(form.value)'>  
<input type="text" id="datepicker" [(ngModel)]="date" name="date">  
<button type="submit"> click </button> 
</form> 

--component--- 
export class AppComponent {  
    public date = "09/09/1999";  
    search(form: any) { 
     console.log("date:" + form.date); // date: 
    }  
} 

はい、私はこの(ngSubmit)= "検索(date.value)" のように、コンポーネントへの入力値を渡すためにローカルテンプレート変数#dateを使用することができます。しかし、複数の入力Datepickerの場合、ローカル変数の値を連結し、search()に渡すことができます。

ngModelがdatepicker入力の変更を追跡できない理由と、コンポーネントプロパティまたはform.valueを更新するための最良の方法は何かを知りたいのですが、

+0

jQueryをAngularで使用しているのはなぜですか? jQueryはネーミングDOMオブジェクトをカスタムラッパーにラップし、AngularなどのJSフレームワークの悪夢を引き起こします。 datepickerが必要な場合は、そこに多くのngライブラリの1つを使用することができます。 ngx-bootstrapで名前を1つにします。 –

+1

jQueryを使用しています。期待しているdatepicker UIの機能とスタイルは、jQueryのdatepickerでは非常に有効ですが、他の角度の日付ピッカーでは使用できないためです。 ngx-bootstrapです。 jQueryとJSフレームワークのような角度作成の仕方を理解するには、まだ熟練していません。しかし、まだjQueryを使用したい場合、またはngModelがdatepicker入力値を読み取ることができない理由を説明したい場合は、それを解決するための提案はありますか?ご意見ありがとうございます。 – SayedRakib

答えて

1

jQueryのdatepickerをAngularで動作させるためのアドバイスはありません。コアjQueryまたはCore Angularを大幅に書き直す必要があります。 ngModelはjQueryの-UIオブジェクトを読み取ることができない理由として、説明のために

look at this post I made earlier on a similar thread.

ngModelは、ネイティブのDOMオブジェクトへのアクセスに依存している - jQueryのは、独自のカスタムjQueryオブジェクトにこれらのオブジェクトを抽象化します。 Angularには、このjQueryオブジェクトを処理するためのAPIはありません。

関連する問題