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

EN

npm install cookies-js

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

...
@NgModule({

imports: [
ReactiveFormsModule
]
})

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

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();
  }

}