Question

当用户导航到隐私策略等其他组件并返回表单时，我想在角度表单输入字段中保留值。当用户从隐私权政策返回表单时，他应该看到先前输入的数据

Answer 1

最佳解决方案-使用状态。

最简单的解决方案-在输入事件中保存值。例如：

<input FormControl="name" (input)="saveValue"/>

在您的ts中：

saveValue() {
this.name = this.form.get('name').value;
}

然后当您返回表单时，调用reBuild函数。

reBuild() {
this.form.get('name').setValue(this.name) ;
}

Answer 2

您可以使用localStorage。真的很容易使用。

var data = "some data";
localStorage.setItem("data_item", data);
localStorage.getItem("data_item"); //returns "some data"

或

使用SessionStorage或cookie来存储您的数据。

单击刷新后，将数据复制到上述任何存储中，并在init上将其复制回变量中。检查以下示例。将sessionStorage替换为localStorage，以将数据存储在localStorage中。

In AppComponent

    ngOnInit() {
    if (sessionStorage.getItem("user")) {
      this.data.changeUser(sessionStorage.getItem("user"));
    }
    }
@HostListener('window:beforeunload', ['$event'])
      unloadNotification($event: any) {
        sessionStorage.setItem("user", this.getUser());
    }

Answer 3

点击保存按钮后如何保留数据。

当用户点击保存按钮时，让我们调用下面的方法，它删除旧键并将新表单（MessageForm）数据保存在本地存储中。


      onSave() {
    
        //removes the data with key as user
        localStorage.removeItem("teja");
    
        //adds new data with key as user
        localStorage.setItem("teja", JSON.stringify(this.MessageForm.value));
    
        //reset form once form is edited dirty flag is set 
        //so we need to reset form else on close we get 
        //notification saying form is dirty even when user clicked on save
        this.MessageForm.reset(JSON.parse(localStorage.getItem('teja')));
      }

当我们再次加载页面时，我们可以使用密钥“teja”从该存储中检索数据


      ngOnInit(): void {
        //retrieves data if exists.
        if (localStorage.getItem('teja')) {
          this.MessageForm.setValue(JSON.parse(localStorage.getItem('teja')));
        }
      }

用户在没有保存的情况下修改了表单并尝试关闭窗口，您有两种选择，要么弹出一个说他有未保存数据的弹出窗口，要么将表单存储在本地存储中。我要在这里混合它们。


      @HostListener('window:beforeunload', ['$event']) unloadNotification($event: any) {
        if (this.MessageForm.dirty) {
          //store data
          localStorage.setItem("teja", JSON.stringify(this.MessageForm.value));
          //show popup
          $event.returnValue = true;
        }
      }

使用hostistener，您可以处理窗口关闭或页面刷新等事件。在其中，我们正在检查表单是否脏，这仅在用户修改表单时设置。您将看到的一个问题是，如果用户单击“保存”并尝试关闭窗口，您仍然会看到弹出窗口，说用户有未保存的数据。这是因为一旦表单被编辑，它的脏标志就被设置了。你需要重置它。最后将以下逻辑添加到 Onsave


    //reset form once form is edited dirty flag is set 
    //so we need to reset form else on close we get 
    //notification saying form is dirty even when user clicked on save
    this.MessageForm.reset(JSON.parse(localStorage.getItem('teja')));

关于如何在用户导航到不同页面而不保存数据时保存数据的问题。两种选择

当用户导航到不同的页面时会弹出或保存数据到 localstorage 创建一个像下面这样的守卫（命令：ng g guard 警卫姓名）


    import { AppComponent } from './../app/app.component';
    import { Injectable } from '@angular/core';
    import { CanActivate, CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
    import { Observable } from 'rxjs';
    
    @Injectable({
      providedIn: 'root'
    })
    export class UnsavedataGuard implements CanDeactivate<unknown> {
    
      canDeactivate(
        component: AppComponent): boolean {
        if (component.MessageForm.dirty) {
          localStorage.setItem("teja", JSON.stringify(component.MessageForm.value));
          return confirm('Are you sure you want to continue? Any unsaved changes will be lost');
        }
        return true;
      }
    
    }

更新您的路线以访问警卫


    const routes: Routes = [
        { path: '', component: AppComponent, canDeactivate: [UnsavedataGuard] },
        { path: '**', component: AppComponent, pathMatch: 'full' }
    ];

在用户修改表单的那一刻将数据保存到本地存储——我将离开这部分的研究，因为代码对我来说不方便?

请找到缩小版教程：https://tejaxspace.com/storage-local-session/

请找到一个 angular 演示应用程序：https://github.com/tejaswipandava/AngularDataPersistence.git

如何保持角电抗形式的值？

3 个答案: