如何在角度 4 中实现自动保存反应形式？答案

【问题标题】：How to implement auto save a reactive form in angular 4?如何在角度 4 中实现自动保存反应形式？
【发布时间】：2018-02-16 01:53:26
【问题描述】：

我想在表单有效时自动以响应式形式保存内容，而无需单击保存按钮。

【问题讨论】：

您好，欢迎来到 stackoverflow ...到目前为止您尝试了什么？
我尝试使用 angular-auto-save-form 但似乎在 angular4 中不起作用。
您的意思是要在每次击键时保存用户数据？
不是每次击键都......这会很昂贵。
如果我的表单有效，我想保存数据。通常，当我的表单有效时，保存按钮会激活，所以我喜欢在我的表单有效时尽快保存

标签： angular autosave angular-reactive-forms

【解决方案1】：

您将要订阅 FormGroup 的 statusChanges() 方法，并且在该 Observable 中您可以确定 FormGroup 是否有效，然后触发保存事件。

import 'rxjs/add/operator/takeWhile';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({...})
export class MyComponent {

  private form: FormGroup;
  private alive: boolean;

  constructor(private formBuilder: FormBuilder) {}

  public ngOnInit(): void {
    this.alive = true;
    this.form = this.formBuilder.group({
      // your form configuration
    });

    this.form.statusChanges()
      .takeWhile(this.alive) // only subscribe while this component is alive
      .subscribe((status) => {
        // if status is valid, auto-save
      });
  }

  public void ngOnDestroy() {
    this.alive = false;
  }
}

【讨论】：

新版RXJS会是这样吗？ this.form.statusChanges.pipe(takeWhile(() => this.formAlive)).subscribe( (status) => { console.log(status); } );

【解决方案2】：

最后别忘了退订。您应该捕获您的订阅并在最后取消订阅。以避免任何内存泄漏。

import { Subscription } from 'rxjs/subscription';
@Component({...})
export class MyComponent {
 ...
 subscription = new Subscription;
 ...

 ngOnInit() {
  this.subscription.add(this.form.statusChanges()
   .takeWhile(this.alive)
   .subscribe(status => {
     //do whatever
   });

 ngOnDestroy() {
   this.subscription.unsubscribe();
 }

【讨论】：

【解决方案3】：

如果您有异步验证器，则以下选项将仅在验证器已执行且未报告错误后保存表单

formControl.statusChanges
  .pipe(
    filter((status) => status === 'VALID'),
    withLatestFrom(formControl.valueChanges),
    map(([_status, value]) => value),
    switchMap(value=>this.service.save(value)) // if you are using a service
    takeUntil(this.destroy$)
  )
  .subscribe((value) => {
    //if you've been using NGRX for example
    this.store.dispatch(action)
  });

【讨论】：