Angular 4では、FormGroupをクエリパラメータを持つURLに変換するにはどうすればよいですか？

Question

私のAngularアプリケーションでは、ユーザーが内部データベースを検索するために使用できる多機能リアクティブフォームがあります。

ユーザーが[検索]をクリックすると、SearchResultsComponentにルーティングして結果を表示します。また、フォーム入力を表すクエリパラメータをブラウザのルートに含めて、ユーザがどこかにコピーして簡単に再利用できるようにします。基本的に想像するように、https://carsuniverse.com/?make=Honda&model=Civic&year=2009にアクセスすると、SearchResultsComponentがアクティブになり、検索を実行してコンポーネントに戻り、ページに表示されます。

ベストは何ですか？ ）Angularでこれを行うには？

Answer 1

はこれを試してみてください：

const params = new URLSearchParams(); 
const formValue = this.form.value; // this.form should be a FormGroup 

for (key in formValue) { 
    params.append(key, formValue[key]); 
} 

我々は、フォームの値であるオブジェクトをつかむと、各キーのために、私たちは要求を行うときにHttpライブラリに渡すことができるURLSearchParamsオブジェクトに値を追加します。

フォームが深くネストされている場合は、このことの影響を考えてください。あなたが深くネストされたフォームは、クエリのparamsで表現したい場合は

UPDATE

、あなたは少しforループを変更する必要があります。しかし、ここであなたのクエリが深くネストされたオブジェクトのためにどのように見えるかの例です：

{ 
    name: 'John', 
    favorites: { 
     food: 'Pizza', 
     candy: 'Jolly Ranchers' 
    } 
} 

上記の目的は、次のように表すことができる：

?name=John&favorites[food]=Pizza&favorites[candy]=Jolly+Ranc‌​hers