initialisation d"un champ date via un patchValue compris dans objet complex

Version imprimable

Bonjour

Je recupere via un serviceREST un objet complex comprenant une date au format yyyy-MM-DD, mais lorsque je souhaite initialiser ma "form" avec un patchValue, ma date n'est pas reconnu et donc mon date-picker va me poser un soucis
Une idee ?
Je voudrais eviter de me convertir tous les champs un par un à cause d'un seul champ date !

Merci

1 json object from MyService

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
{
    "profilId": 50531,
    "surname": "3454",
    "name": "11",
    "date": "2027-12-30"
	...
	...
	...
	...
	...
 
 
}

2 html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 <kendo-datepicker id = "date" formControlName = "date" class = "pull-left" >  </kendo-datepicker>
 
    3 component
    export class DossiersDetailDossierTabsheetSommaireFormComponent implements OnInit {
    constructor(private formBuilder: FormBuilder,
        private activatedroute: ActivatedRoute,
        private router: Router,
        private dps: MyService ) {}
 
    ngOnInit() {
        this.registerForm = this.formBuilder.group({
            profilId: [''],
            surname: [''],
            name: [''],
			date: ['']
        });
 
        this.dps.getData(this.id)
        .pipe(first())
        .subscribe(x => this.registerForm.patchValue(x)); //ERROR ON Date field
    }
}

utilises les balises code

Code:

1
2
3
4
5
6
7
.subscribe((x: any) =>{
 console.log('x', x);    // ça donne quoi ?
 this.registerForm.patchValue(x.code)
 
}
); //ERROR ON Date field

Bonjour
Sur un champ normal cela fonctionne mais j'ai 50 champs dans ma page
Merci

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
 
   this.dps.getService(this.id).subscribe((x: any) =>{
 
          console.log('x', x);    // ça donne quoi ? --> OK
          this.registerForm.patchValue(x.nom)
        console.log('apres NOM ok')
 
       this.registerForm.controls['dateDeNaissance'].patchValue(new Date(x.dateDeNaissance)); //ok
//Mais j'ai 50 champs !!
 
        }

on peut setter un formulaire de façon globale :
mais faut que le nommage des champs et du json correspondent
Code:

1 2 this.registerForm.setValue(.......mon json.....);
si il y a des différences comme tu l'a indiqué :
Code:

1 2 3 this.registerForm.setValue(x); // peut être une erreur va etre lancé, je ne sais pas this.registerForm.controls['dateDeNaissance'].setValue(new Date(x.dateDeNaissance));
il y a une erreur ? si oui, j'ai une autre solution

J'ai effectivement une erreur "Error: The 'value' should be a valid JavaScript Date instance"
Ma form possède 52 champs en tout

Code:

1
2
3
4
5
6
7
8
9
 
      this.dps.getService(this.id).subscribe((x: any) =>{
      this.registerForm.setValue(x);         // peut être une erreur va etre lancé, je ne sais pas
      this.registerForm.controls['dateDeNaissance'].setValue(new Date(x.dateDeNaissance));
          this.registerForm.controls['expirationRamq'].setValue(new Date(x.expirationRamq));
          this.registerForm.controls['dateEvenementCsst'].setValue(new Date(x.dateEvenementCsst));
          this.registerForm.controls['dateExpirationCarteFadoq'].setValue(new Date(x.dateExpirationCarteFadoq));
        }
      );

on ne peut pas mettre un new date dans un champ
en html, tous les champs input sont des chaines de caractères

Code:

1
2
3
4
5
6
7
8
9
 
      this.dps.getService(this.id).subscribe((x: any) =>{
      this.registerForm.setValue(x);         // peut être une erreur va etre lancé, je ne sais pas
      this.registerForm.controls['dateDeNaissance'].setValue(x.dateDeNaissance);
          this.registerForm.controls['expirationRamq'].setValue(x.expirationRamq);
          this.registerForm.controls['dateEvenementCsst'].setValue(x.dateEvenementCsst);
          this.registerForm.controls['dateExpirationCarteFadoq'].setValue(x.dateExpirationCarteFadoq);
        }
      );

01/10/2021, 08h40
pcouas

Bonjour

Oui les input sont du HTML mais le composant datePicker demande une date. Il faut donc que j'arrive à la caster dynamiquement dans le formControl sans me faire tous mes 52 champs un par un

datepicker qui est du javascriopt va prendre la chaine "texte" dans le input pour la convertir en objet et faire sa tambouille !
en aucun cas il faut mettre un objet dans un input

est ce que cela génère une erreur si oui laquelle ?

Code:

1
2
3
4
5
6
7
8
      this.dps.getService(this.id).subscribe((x: any) =>{
      this.registerForm.setValue(x);         // peut être une erreur va etre lancé, je ne sais pas
      this.registerForm.controls['dateDeNaissance'].setValue(x.dateDeNaissance);
          this.registerForm.controls['expirationRamq'].setValue(x.expirationRamq);
          this.registerForm.controls['dateEvenementCsst'].setValue(x.dateEvenementCsst);
          this.registerForm.controls['dateExpirationCarteFadoq'].setValue(x.dateExpirationCarteFadoq);
        }
      );