How can I loop through the elements on my form to check which ones were touched?

Question

I'm working with reactive forms in Angular 6. I have a form with several select inputs and checkbox elements. I'm currently getting the value of each input and passing that to the router.navigate() when the user clicks the apply button.

I would like to change my function and only get the value of each select inputs and checkbox elements if the user touched the input. None of the fields are required so it's possible the user will not touch several inputs. This way my url will not be polluted with a bunch of null values. I then want to take that object and pass it to my router.navigate().

I started writing the function to loop through the elements, but it's not working. I'm getting a

Error: Cannot invoke an expression whose type lacks a call signature.

Instead of trying to check against pristine I would be happy to check against falsy values. Any help will be appreciated.

addExtraParameters() {
    this.providerForm.controls.forEach(element => {
        if(element.pristine === false ) {
           this.param.push(element); 
        }
    });

    this.router.navigate([],
    { queryParams: {
        this.param    // I want to pass the object here
        }, queryParamsHandling: 'merge'
    });
}

Answer 1

尝试使用.dirty，如果用户已经与表单进行了交互，它将为TRUE。