アングル4でリアクティブフォームを自動保存する方法は？

Question

保存ボタンをクリックせずにフォームが有効な場合、反応的なフォームでコンテンツを自動保存したい。

Answer 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; 
    } 
} 

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