ERROR Missing number at position 0 when using setValue angular 4

Question

I'm using Angular 4 with reactiveforms, momentjs, and primeng calendar I'm tying to use setValue and have tried patchValue on a reactiveForm field which contains a Date. This date has been created via a primeng calendar.

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

I use this 'date' to do a couple of things and then onSumbit of the form I convert the date using momentjs to a clean format ready for the backend to accept (i.e. YYYY.MM.DD) using.moment().format(....

However when I run the .setValue I'm getting the following console error ERROR Missing number at position 0 and can't figure out why.

// 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

I have traced the issue down to when i try to set / patch the primeng calendar value - for some reason is doesn't like to be changed.

UPDATED monent format

The issue seams to be happening on the setValue now getting the following error Unexpected literal at position 2 at viewWrappedDebugError

You will need to pass in the formGroup value and I don't think moment will accept a single y. moment(this.form.get('purchaseDate').value).format('yy.MM.dd'); — JayChase
Moment format does not accept lowercase y as year token, use Y, YY or YYYY instead. Moreover note that lowercase dd token stands for day of the week (Su Mo ... Fr Sa), use uppercase DD if you want day of the month (01 02 ... 30 31) — VincenzoC
@JayChase & @VincenzoC hi, thanks - I've updated the code with your suggestion but now getting ERROR Error: Unexpected literal at position 2 — fidev
FYI @JayChase omitting .value makes no difference, I'm logging newDate out and the same appears with or without .value — fidev
Did you tried to make newDate a moment object (let newDate = moment(this.form.get('purchaseDate').value)) and then set the value of purchaseDate as Javascript Date (using moment toDate() : this.form.get('purchaseDate').setValue(newDate.toDate());)? — VincenzoC

Yaroslav Admin Yaroslav Admin · Accepted Answer · 2017-09-09T14:10:54

The thing is that PrimeNG date picker expects to receive instance of Date class as a value and it returns instance of a Date class as value. So that's why your attempts to put object of other types in there failed.

It's not clear why you attempt to call setValue() in the submit handler.

If your goal is to modify value programmatically follow suggestion from VincenzoC in comments - modify object and transform it back to Date object before passing it to setValue().

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

If your goal is to format Date object for submitting to backend, you don't need to call setValue() at all. Format Date object to string and pass this string instead of Date object to the backend API. If you submitting whole value object from form you can modify it this way before submitting:

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

ERROR Missing number at position 0 when using setValue angular 4

2 Answers