Как я могу передать свой объект в queryParams в Angular 6?

Question

Я использую Reactive Forms, чтобы заполнить форму на моей странице.Когда пользователь вносит свои изменения и клики применяются.Значения из формы берутся и применяются к URL.Поля формы не являются обязательными, и пользователь может вернуться на страницу и изменить поля так, как он хочет.

Я перебираю все элементы управления формой, чтобы увидеть, не является ли их значение ложным.Если значение не ложное, я хочу взять пары ключ и значение из моего ввода select и передать его в метод router.navigate для заполнения URL.Я вижу пары ключей и значений, которые мне нужны, в моей консоли внутри цикла, но я не знаю, как сохранить эти значения в объекте и передать его моему объекту queryParams в методе router.navigate за пределами цикла.,Соответствующий код ниже.

Для ясности я не хочу использовать исходные или прикосновенные значения для проверки, потому что пользователь может коснуться формы и изменить ее на значение по умолчанию.Кроме того, если я помещаю router.navigate () внутри цикла for, к URL добавляется только последняя пара ключ и значение.

console.log внутри моего оператора else содержит элементы, которые пользовательвыбран.Как я могу взять эти значения и передать их queryParms в моем router.navigate ()?

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'
    });
}

Answer 1

Ваш код требует небольших изменений - посмотрите на комментарии для изменения

addExtraParameters() {
    var params = {}; //create new param object
    for (var key in this.providerForm.controls) {
        let x = this.providerForm.get(key).value;  //create local variable.
        if (!x || x === "null") {
           // this removes items that were not touched or edited
       } else {
           console.log(key, x);
           params[key] = x; //add new param key and value to existing params
       }
    }

    this.router.navigate([],
    { queryParams: params, queryParamsHandling: 'merge'
    });
}