Question

在我的项目中，我使用了一个注册数据的组件。在此组件中，我想将所有输入的数据注册到本地存储中，并且只想在Webservice中发布3个参数。所以我只想使用一个组件和[formGroup]。

在这个Demo中，我有项目。

  this.ConfigurationForm = this.formBuilder.group({
        ipaddwifi: new FormControl("", [Validators.required]),
        wifi: new FormControl("", [Validators.required]),
        pass: new FormControl("", [Validators.required]),
        out1: new FormControl(false),
        out2: new FormControl(false),
        out3: new FormControl(false),
        out4: new FormControl(false)
    });

我有这个表格组，这个寄存器：

register() {
    // Needs relative path to work with Playground
    let LS = require("../nativescript-localstorage");
    LS.setItem(ConfigurationComponent.CURRENT_CONFIG, JSON.stringify(this.ConfigurationForm.getRawValue()));
    this.routerExtensions.back();
    this.configservice.createConfiguration(
        this.ConfigurationForm.value.ipaddwifi,
        this.ConfigurationForm.value.wifi,
        this.ConfigurationForm.value.pass)
}

我想当我更改wifi和/或pass以便发布到Web服务中时，否则，只保存到本地存储中

Answer 1

我从您的问题中了解到，您需要将一些数据（表单对象值）保存到localsotrage中，并在输入发生更改时进行更新，并将其发送到api，下面我写了使用解决该问题的步骤

在ngOnInit方法中，检查localstorage是否具有表单，如果没有表单，则可以使用默认值（空值）保存表单在本地存储中。
在register方法中，您将从存储中检索表单值。
然后从html表单获取值。
在这两个对象之间进行比较，一个是从本地存储中获取的对象，另一个是从html中获取的对象（当前的对象），并检查值是否已更改，然后对其进行更新。
将更新后的对象保存到本地存储中。
将所需的参数发送到api。

Answer 2

我不确定这里是什么问题，就像编写if条件一样简单。

     const oldValues = JSON.parse(LS.getItem(ConfigurationComponent.CURRENT_CONFIG) || "{}");
    if (oldValues.ipaddwifi !== ipaddwifi || oldValues.pass !== pass) {
        // Hit your api when new values do not match with old one
    }

Updated Playground

如何使用一个[formGroup]数据发布到Webservice中

2 个答案: