Discussion :

[pcouas]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[krakatoa]

utilises les balises code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[pcouas]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !!
 
        }

[dukoid]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
this.registerForm.setValue(.......mon json.....);

si il y a des différences comme tu l'a indiqué :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[pcouas]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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));
        }
      );

[dukoid]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
        }
      );