Question

我打算在FormBuilder的帮助下使用ReactiveForms。而且我想知道可以实现自动保存的方式。我需要以下行为：

页面上没有提交按钮。当用户在表单中进行更改时，数据会自动保存并发送到服务器。

如何在Angular2中实现这一目标？

谢谢。

Answer 1

您可以订阅表单的Task Interval Frequency Mopping Daily 2 Checking Tissues Hourly 1 Cleaning Toilet Every Two Hours 1 Clean Building Walled Area Yearly 2 Clean Building Mirror Facade Every Six Months 1事件。然后只需检查表单是否有效，然后在每次更改时保存数据。

valueChanges

this.form = new FormGroup({...}); this.form.valueChanges.subscribe(val => { this.saveMyFormValue(val); });是抽象类valueChanges上的属性。 AbstractControl，FormGroup和FormControl都实现FormArray，这意味着如果您愿意，也可以为单个表单控件订阅此事件。

Answer 2

以下是我们目前在React Todos example app中实现的目标。

另外，据我所知，您应该能够听取onBlur事件 - 它与onFocus相反。还有一个名为onChanged的事件，可能对您的特定用例有所帮助。

Answer 3

我将下面的代码放在Profile Component的构造函数中。我使用可用的延迟方法给自动保存一点时间。

然后，如果表单有效且表单是脏的，我调用我的saveProfile方法并重置表单。

以下是代码：

this.form = this.formBuilder.group({
  firstName: ['', Validators.required],
  lastName: ['', Validators.required],
});

this.form.valueChanges
  .delay(6000)
  .subscribe(() => {
    if (this. form.valid && this.form.touched) {
      this.saveForm();
      this.form.reset()
    }
  });

我希望这会有所帮助。如果可能的话，也可以采用更好的方式来做到这一点。

如何实现表单的自动保存？

3 个答案: