web-dev-qa-db-fra.com

ERREUR Nombre manquant à l'utilisation de setValue angular 4

J'utilise Angular 4 avec les formes réactives, momentjs , et primeng calendar Je suis sur le point d'utiliser setValue et j'ai essayé patchValue sur un champ reactifForm contenant un Rendez-vous amoureux. Cette date a été créée via un calendrier primeng.

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

J'utilise cette "date" pour faire plusieurs choses, puis onSumbit du formulaire que je convertis la date en utilisant momentjs en un format propre prêt à être accepté par le serveur (c'est-à-dire AAAA.MM.DD) en utilisant .moment().format(....

Cependant, lorsque j'exécute le .setValue, l'erreur de console suivante ERROR Missing number at position 0 s'affiche et je ne comprends pas pourquoi.

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

J'ai retracé le problème jusqu'au moment où j'essaie de définir/corriger la valeur du calendrier primeng - pour une raison quelconque, n'aime pas être modifié.

MIS À JOURformat monent

Le problème semble se produire sur setValue et génère maintenant l'erreur suivante Unexpected literal at position 2 at viewWrappedDebugError

javascriptangularmomentjsprimengangular-reactive-forms
10
fidev

Le fait est que le sélecteur de date PrimeNG s'attend à recevoir l'instance de la classe Date en tant que valeur et qu'il renvoie l'instance d'une classe Date en tant que valeur. C'est pourquoi vos tentatives de placer des objets d'autres types ont échoué.

La raison pour laquelle vous essayez d'appeler setValue() dans le gestionnaire de soumission n'est pas claire.

Si votre objectif est de modifier la valeur par programme, suivez les suggestions de VincenzoC dans les commentaires - modifiez l'objet et transformez-le en objet Date avant de le transmettre à setValue().

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

Si votre objectif est de formater un objet Date pour le soumettre au backend, vous n'avez pas du tout besoin d'appeler setValue(). Formatez l'objet Date en chaîne et transmettez cette chaîne au lieu de l'objet Date à l'API dorsale. Si vous soumettez un objet value entier à partir du formulaire, vous pouvez le modifier de cette façon avant de soumettre:

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

J'ai eu le même problème et j'ai remarqué que j'essayais de donner la date à PrimeNG dans un mauvais ordre:

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

C'était aussi simple que ça dans mon cas.

0
hardfi