如何根据页面上呈现的表单组件是否有效使用角度来限制浏览器刷新答案

【问题标题】：How to restrict browser refresh based on whether rendered form component on a page is valid or not using angular如何根据页面上呈现的表单组件是否有效使用角度来限制浏览器刷新
【发布时间】：2017-07-19 21:04:12
【问题描述】：

我正在尝试构建一个通用服务，如果刷新时页面上存在任何无效表单，它将限制用户刷新页面。即如果表单有效，则允许用户刷新页面，否则不允许（或让用户了解数据丢失）。

我尝试在我的服务中注册 window.onbeforeload 事件，但没有关于表单组件的信息。

【问题讨论】：

我猜你的意思不是onbefore**un**load？ “但没有关于表单组件的信息”是什么意思？

标签： angular

【解决方案1】：

我认为您可能想研究 Reactive Forms，也许还有类似 Cookies 之类的东西。如果用户可以禁用 cookie 并破坏它。但是使用 cookie，您可以导航离开和返回。如果表单有效，则保存到 cookie。

以下是帮助您入门的路线图：

npm install cookies-js

应用模块.ts

import {ReactiveFormsModule} from '@angular/forms';

...
@NgModule({

imports: [
ReactiveFormsModule
]
})

我的组件.html

 <form [formGroup]="form">
    <input name="a" formControlName="xxx">
  </form>

我的组件.ts

import {Component,OnInit} from '@angular/core';
import {FormGroup, FormBuilder, Validators} from '@angular/forms"
import * as Cookies from 'cookies-js';

export class MyComponent implements OnInit {

  form : FormGroup;
  private static readonly COOKIE_STORE = 'my-component-cookie';


  constructor(private fb: FormBuilder) {
     this.form = this.fb.group({
        xxx:['' Validators.required]
     });

  }

  ngOnInit() {
    const formData = Cookies.get(MyComponent.COOKIE_STORE);
    if (formData) {
      this.form.setValue(
        JSON.parse(formData)
       );
    }
    this.form.valueChanges
      .filter(() => this.form.valid)
      .do(validFormData => 
          Cookies.set(MyComponent.COOKIE_STORE, 
             JSON.stringify(validFormData) 
           )
      )
      .subscribe();
  }

}

【讨论】：