Question

我有一个反应式表单，该表单具有大约10个字段，每个字段具有2个异步验证，并且在这种情况下，我必须设计自动保存功能，例如当用户从网站导航并稍后返回时，他将获得与表单相同的状态，他离开了。在UI上自动保存数据呈现时，它将再次验证所有字段。

有什么方法可以检测所有表单验证完成的时间吗？

Answer 1

类似的事情应该可以解决问题

this.form.statusChange(
   filter(status=>status==='VALID'),
   switchMap(_=>this.yourAutoSaveFunction(this.form.value))
).subscribe()

Answer 2

您可以使用角形将其激活

reactive-forms

profileForm = this.fb.group({
    firstName: ['', Validators.required],
    lastName: [''],
    address: this.fb.group({
      street: [''],
      city: [''],
      state: [''],
      zip: ['']
    }),
    aliases: this.fb.array([
      this.fb.control('')
    ])
  });

然后提交 您可以获取所有值

onSubmit() {
    // TODO: Use EventEmitter with form value
    console.log(this.profileForm.value);
  }

然后您可以将其保存在本地存储中

localStorage

以下代码段访问当前域的本地存储对象，并使用Storage.setItem（）向其添加数据项。

localStorage.setItem('formdata', this.profileForm.value);

读取localStorage项的语法如下：

var cat = localStorage.getItem('formdata');

**

已更新

**

如果只想获取状态而不是值，则可以使用statusChanges：

export class Component {

    @ViewChild('myForm') myForm;

    this.myForm.statusChanges.subscribe(
        result => console.log(result)
    );
}

如果您甚至想要更改数据，您可以订阅表单的valueChanges并使用this.myForm.status检查表单的状态：

export class Component {

    @ViewChild('myForm') myForm;

    this.myForm.valueChanges.subscribe(
        result => console.log(this.myForm.status)
    );
}

状态的可能值为：有效，无效，待处理或已禁用。

角反应形式验证完成事件

2 个答案: