如何将对象传递给Angular 6中的queryParams?

我正在使用反应式表单填充页面上的表单。当用户进行编辑并单击“应用”时。表单中的值被获取并应用到url。表单字段不是必需的,用户可以返回页面并随意更改字段。

为了清楚起见,我不想使用原生的pristine或touched值进行检查,因为用户可以触摸表单并将其更改回默认值。另外,如果我将router.navigate()放在for-in循环中,则只会将最后一个键和值对添加到URL中。

addExtraParameters() {
    for (var key in this.providerForm.controls) {
        this.x = this.providerForm.get(key).value
        if (!this.x || this.x === "null") {
           // this removes items that were not touched or edited
       } else {
           console.log(key, this.x);
       }
    }

    this.router.navigate([],
    { queryParams: {
        [key]: this.x // this doesn't work
        }, queryParamsHandling: 'merge'
    });
}