如何以角度反应的形式坚持价值？ [英] How to persist value in angular reactive form?

问题描述

当用户导航到不同的组件(如隐私策略)并返回到表单时，我希望保留角度表单输入字段中的值。当用户从隐私策略返回表单时，他应该会看到以前输入的数据

推荐答案

• 单击保存按钮后如何持久化数据。

当用户单击"保存"按钮时，让我们调用下面的方法，它将删除旧键并将新表单(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;
        }
      }

使用主机管理器，您可以处理窗口关闭或页面刷新等事件。在其中，我们检查表单是否脏，只有在用户修改表单时才会设置。 您将看到的一个问题是，如果用户单击保存并尝试关闭窗口，您仍然会看到弹出窗口，提示用户有未保存的数据。这是因为一旦表单被编辑，它的脏标志就会被设置。你需要重置它。 将以下逻辑添加到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')));

• 谈到当用户导航到另一个页面而不保存数据时如何保存数据的问题。两个选择

1. 当用户导航到其他页面时，提供弹出窗口或保存数据 要本地存储，请创建如下所示的防护(命令：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' }
    ];

2. 用户修改表单时将数据保存到本地存储--由于代码对我来说不方便使用，我将保留这部分的研究
😉

请查找缩略教程：https://tejaxspace.com/storage-local-session/

请查找角度演示应用：https://github.com/tejaswipandava/AngularDataPersistence.git

这篇关于如何以角度反应的形式坚持价值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！