web-dev-qa-db-ja.com

エラーsetValue angular 4を使用すると、位置0に数値がありません

Angular 4 をreactiveformsで使用しています、 momentjs 、および primeng calendarsetValueを使用して、試しました日付を含むreactiveFormフィールドのpatchValue。この日付は、primengカレンダーを介して作成されています。

purchaseDate: Sat Sep 02 2017 00:00:00 GMT+0100 (GMT Daylight Time)

この「日付」を使用していくつかのことを行い、次にmomentjsを使用して日付をバックエンドが受け入れる準備ができているクリーンな形式（つまりYYYY.MM.DD）に変換するフォームのonSumbit .moment().format(....

ただし、.setValueを実行すると、次のコンソールエラーERROR Missing number at position 0が発生し、その理由がわかりません。

// convert the date
let newDate = moment(this.form.get('purchaseDate').value).format('YYYY.MM.DD');
// let newDate = moment(this.form.get('purchaseDate')).format('YYYY.MM.DD');
// with or without .value - display the same below (2017.09.01)
console.log(newDate); // 2017.09.01
this.form.get('purchaseDate').setValue(newDate);

// if I create a seperate (empty) reactiveForms field to test against
this.form.get('testField').setValue(newDate) // this works fine

プライミングカレンダーの値を設定/パッチしようとしたときまで問題を追跡しました-何らかの理由で変更したくないのです。

[〜＃〜]更新された[〜＃〜]モネントフォーマット

この問題はsetValueで発生しているため、次のエラーが発生しますUnexpected literal at position 2 at viewWrappedDebugError

javascriptangularmomentjsprimengangular-reactive-forms
10
fidev

PrimeNG日付ピッカーは、Dateクラスのインスタンスを値として受け取ることを期待し、Dateクラスのインスタンスを値として返します。そのため、他のタイプのオブジェクトをそこに配置する試みは失敗しました。

送信ハンドラーでsetValue()を呼び出そうとする理由は明確ではありません。

プログラムで値を変更することが目標の場合は、コメントのVincenzoCからの提案に従ってください。オブジェクトを変更し、setValue()に渡す前にオブジェクトをDateオブジェクトに変換して戻します。

_let newDate: Date = moment(this.form.get('purchaseDate').value).add(5, 'days').toDate();
this.form.get('purchaseDate').setValue(newDate);
_

バックエンドに送信するためにDateオブジェクトをフォーマットすることが目標である場合は、setValue()を呼び出す必要はまったくありません。 Dateオブジェクトを文字列にフォーマットし、Dateオブジェクトの代わりにこの文字列をバックエンドAPIに渡します。フォームからvalueオブジェクト全体を送信する場合は、送信する前に次のように変更できます。

_let newDate: string = moment(this.form.get('purchaseDate').value).format('YYYY.MM.DD');
let dataForBackend = { ...this.form.value, purchaseDate: newDate };
this.myBackend.sendData(dataForBackend);
_
9
Yaroslav Admin

同様の問題が発生し、PrimeNGの日付を間違った順序で指定しようとしたことに気付きました。

{date: "2018-01-31"} - works perfectly fine,
{date: "31-01-2018"} - ERROR Missing number at position 0

私の場合と同じくらい簡単でした。

0
hardfi