时间戳

首页 > 解决方案 > 如果用户刷新/重新加载，请保留表单数据

angular - 如果用户刷新/重新加载，请保留表单数据

问题描述

我有如下验证的表单，如下所示

<form  [formGroup]="LoginForm">
  First name:<br>
  <input type="text" formControlName="firstname" >
  <br>
  Last name:<br>
  <input type="text" formControlName="lastname">
  <button  type="submit"  [disabled]="!this.LoginForm.valid"></button>
</form>

组件.ts

LoginForm: FormGroup;

onloginUser() {
    this.LoginForm = this.form.group({
      firstname: ['', Validators.required],
      lastname: ['', Validators.required],
    })
  }

我有一个本地存储服务，所以我尝试如下，

this.storage.set("user_data",this.LoginForm.value);
this.storage.get("user_data");

在这里，当我用户重新加载页面或返回/前进时，我的问题应该存在于输入字段中。但上面的代码并没有发生

我试过的链接在stackoverflow 链接中得到了回答，但没有一个答案对我有帮助。所以任何人都可以给出更好的答案，这对我有帮助

标签： angulartypescript

解决方案

这是我这个问题的 TS 文件

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-reload',
  templateUrl: './reload.component.html',
  styleUrls: ['./reload.component.css']
})

export class ReloadComponent  {    
    LoginForm: FormGroup;

    constructor(private FB: FormBuilder ) { 

    // 1 - Get the values from local storage
    const value = JSON.parse(localStorage.getItem('formValue')!);

    // 2 - Create the form with the values
    this.LoginForm = FB.group({
      firstname: [value && value.firstname || '', Validators.required],
      lastname: [value && value.lastname || '', Validators.required]
    });
  
    // 3 - Update local storage on every modification
    this.LoginForm.valueChanges.subscribe(value => {
      localStorage.setItem('formValue', JSON.stringify(this.LoginForm.value));
    });
  }
}

推荐阅读