Persistance d'une valeur d'un input

Version imprimable

01/12/2020, 16h43
olivier252

Persistance d'une valeur d'un input

bonjour,

Cette fois je viens vous demander comment je pourrais faire pour conserver la valeur d'un champ saisie par l'utilisateur à travers le scénario suivant
- 1 le user tape "toto" et valide le form
- 2 il navigue dans l'appli ou ferme sa session
- 3 il se connecte à nouveau et revient sur son champ, et miracle, il y a toujours écrit "toto" dedans...
- 4 le user change d'avis et modifie le champ et tape "tata"
- 5 répétition de 2 et 3

Est-ce que l'objet localstorage est utilisé pour cela par exemple ?

merci à vous
01/12/2020, 17h45
dukoid

exactement, le localstorage est fait pour ça entre autre...
01/12/2020, 17h49
krakatoa

à savoir que chaque navigateur à son propre localstorage et ce, localement.
donc si on sauvegarde sur chrome, on ne pourra pas récupérer sur firefox ..

sinon faut enregistrer en base de données via une API pour que ça fonctionne de n'importe ou
01/12/2020, 19h43
olivier252

Ah ok, ça n'a pas l'air simple si ça diffère selon les navigateurs...Bon je verrai si j'arrive à m'en sortir. merci

Du coup j'ai fait un truc du genre mais je n'ai pas la bonne manière de faire apparement ce code ne fonctinne pas (je suis sous firefox)

côté html :

Code:

1
2
 <input pInputText type="number" formControlName="nbUserMax" [(ngModel)]="myItemUser" id="nbUserMax"/>
 <input pInputText type="number" formControlName="nbBusinessMax" [(ngModel)]="myItemBusiness" id="nbBusinessMax"/>

côté ts :

Code:

1
2
3
4
5
localStorage.setItem('nbUserMax', String(result.nbUserMax));
localStorage.setItem('nbBusinessMax', String(result.nbBusinessMax));
 
this.myItemUser = localStorage.getItem('nbUserMax');
this.myItemBusiness = localStorage.getItem('nbBusinessMax');

result ?
il y a une erreur dans la console ?

sinon:

Code:

1
2
3
4
5
6
7
 <input pInputText type="number" formControlName="nbUserMax" [(ngModel)]="myItemUser" id="nbUserMax"/>
 <input pInputText type="number" formControlName="nbBusinessMax" [(ngModel)]="myItemBusiness" id="nbBusinessMax"/>
 
// enleve les formControlName parceque tu n'utilises pas les form reactives
 
 <input pInputText type="number"  [(ngModel)]="myItemUser" id="nbUserMax"/>
 <input pInputText type="number" [(ngModel)]="myItemBusiness" id="nbBusinessMax"/>

j'aurais dû donner la fonction complete qui traite le form une fois submit, result est l'objet créé par le form dans l'observable

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
saveOrganization() {
    const organization = this.organizationForm.value;
    this.loadingService.sendIsLoading(true);
    this.organizationService.updateOrganization(this.organization.id, this.organization.name, null, null,
      null, null, null, null, null, null,
      this.tempReportTemplateFile, organization.nbUserMax, organization.nbBusinessMax).subscribe(
      (result: OrganizationJson) => {
        this.organizationEdit.organization = result;
        this.loadingService.sendIsLoading(false);
        this.organization.reportTemplatesFile = this.tempReportTemplateFile;
 
        localStorage.setItem('nbUserMax', String(result.nbUserMax));
        localStorage.setItem('nbBusinessMax', String(result.nbBusinessMax));
 
        this.myItemUser = localStorage.getItem('nbUserMax');
        this.myItemBusiness = localStorage.getItem('nbBusinessMax');
      }, console.error);
  }

ça n'explique toujours pas la présence de 'formControlName' dans le HTML

Code:

1
2
3
4
// enleve les formControlName parceque tu n'utilises pas les form reactives
 
 <input pInputText type="number"  [(ngModel)]="myItemUser" id="nbUserMax"/>
 <input pInputText type="number" [(ngModel)]="myItemBusiness" id="nbBusinessMax"/>

Reactive forms

Code:

1
2
3
4
5
<form [formGroup]="profileForm">
    <input type="text" formControlName="firstName">
    <input type="text" formControlName="lastName">
</form>
...

Code:

1
2
3
4
5
...
  profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
  });