[angular-typescript] fix using form data (#6574)

* #6457: fix sending form params

* #6457: fix sending form params using files

* #6457: fix sending form params with files for angular 4.3

* #6457: generate samples

* #6457: [typescript-angular] fix form data submission in IE/Edge

* re-apply [typescript-angular] add customized encoder to use '+' char in query parameter #6306 (#6334)

* adapt for HttpClient: [typescript-angular] add customized encoder to use '+' char in query parameter #6306 (#6334)

* generate samples

* #6457: fix url parameter encoder imports for angular <4.3

* #6457: generate samples

modules/swagger-codegen/src/main/resources/typescript-angular/api.service.mustache

@@ -20,7 +20,12 @@ import { {{classname}} } from '../{{filename}}';
 
 import { BASE_PATH, COLLECTION_FORMATS }                     from '../variables';
 import { Configuration }                                     from '../configuration';
+{{#useHttpClient}}
+import { CustomHttpUrlEncodingCodec }                        from '../encoder';
+{{/useHttpClient}}
+{{^useHttpClient}}
 import { CustomQueryEncoderHelper }                          from '../encoder';
+{{/useHttpClient}}
 {{#withInterfaces}}
 import { {{classname}}Interface }                            from './{{classname}}Interface';
 {{/withInterfaces}}
@@ -69,11 +74,6 @@ export class {{classname}} {
     }
 
 
-    public isJsonMime(mime: string): boolean {
-        const jsonMime: RegExp = new RegExp('^(application\/json|[^;/ \t]+\/[^;/ \t]+[+]json)[ \t]*(;.*)?$', 'i');
-        return mime != null && (jsonMime.test(mime) || mime.toLowerCase() === 'application/json-patch+json');
-    }
-
 {{^useHttpClient}}
 {{! not sure why we used to generate a second method here rather than inlining those few lines of code, 
     but let's keep it for now for the sake of backwards compatiblity. }}  
@@ -121,7 +121,12 @@ export class {{classname}} {
 {{/allParams}}
 
 {{#hasQueryParams}}
-        let queryParameters = new {{#useHttpClient}}HttpParams{{/useHttpClient}}{{^useHttpClient}}URLSearchParams{{/useHttpClient}}();
+        {{#useHttpClient}}
+        let queryParameters = new HttpParams({encoder: new CustomHttpUrlEncodingCodec()});
+        {{/useHttpClient}}
+        {{^useHttpClient}}
+        let queryParameters = new URLSearchParams('', new CustomQueryEncoderHelper());
+        {{/useHttpClient}}
 {{#queryParams}}
         {{#isListContainer}}
         if ({{paramName}}) {
@@ -207,39 +212,59 @@ export class {{classname}} {
             '{{{mediaType}}}'{{#hasMore}},{{/hasMore}}
             {{/consumes}}
         ];
-        let canConsumeForm = this.canConsumeForm(consumes);
+        const canConsumeForm = this.canConsumeForm(consumes);
+
+        let formParams: { append(param: string, value: any): void; };
         let useForm = false;
+        let convertFormParamsToString = false;
 {{#formParams}}
 {{#isFile}}
+        // use FormData to transmit files using content-type "multipart/form-data"
+        // see https://stackoverflow.com/questions/4007969/application-x-www-form-urlencoded-or-multipart-form-data
         useForm = canConsumeForm;
 {{/isFile}}
 {{/formParams}}
-        let formParams = new (useForm ? FormData : URLSearchParams as any)() as {
-          set(param: string, value: any): void;
-        };
+        if (useForm) {
+            formParams = new FormData();
+        } else {
+{{#useHttpClient}}
+            formParams = new HttpParams({encoder: new CustomHttpUrlEncodingCodec()});
+{{/useHttpClient}}
+{{^useHttpClient}}
+            // TODO: this fails if a parameter is a file, the api can't consume "multipart/form-data" and a blob is passed.
+            convertFormParamsToString = true;
+            formParams = new URLSearchParams('', new CustomQueryEncoderHelper());
+            // set the content-type explicitly to avoid having it set to 'text/plain'
+            headers.set('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8');
+{{/useHttpClient}}
+        }
+
+
+
 {{#formParams}}
         {{#isListContainer}}
         if ({{paramName}}) {
         {{#isCollectionFormatMulti}}
             {{paramName}}.forEach((element) => {
-                formParams.append('{{baseName}}', <any>element);
+                {{#useHttpClient}}formParams = {{/useHttpClient}}formParams.append('{{baseName}}', <any>element){{#useHttpClient}} || formParams{{/useHttpClient}};
             })
         {{/isCollectionFormatMulti}}
         {{^isCollectionFormatMulti}}
-            formParams.set('{{baseName}}', {{paramName}}.join(COLLECTION_FORMATS['{{collectionFormat}}']));
+            {{#useHttpClient}}formParams = {{/useHttpClient}}formParams.append('{{baseName}}', {{paramName}}.join(COLLECTION_FORMATS['{{collectionFormat}}'])){{#useHttpClient}} || formParams{{/useHttpClient}};
         {{/isCollectionFormatMulti}}
         }
         {{/isListContainer}}
         {{^isListContainer}}
         if ({{paramName}} !== undefined) {
-            formParams.set('{{baseName}}', <any>{{paramName}});
+            {{#useHttpClient}}formParams = {{/useHttpClient}}formParams.append('{{baseName}}', <any>{{paramName}}){{#useHttpClient}} || formParams{{/useHttpClient}};
         }
         {{/isListContainer}}
 {{/formParams}}
 
 {{/hasFormParams}}
 {{#useHttpClient}}
-        return this.httpClient.{{httpMethod}}{{^isResponseFile}}<any>{{/isResponseFile}}(`${this.basePath}{{{path}}}`, {{#bodyParam}}{{paramName}}, {{/bodyParam}}{{#hasFormParams}}formParams, {{/hasFormParams}}{
+        return this.httpClient.{{httpMethod}}{{^isResponseFile}}<any>{{/isResponseFile}}(`${this.basePath}{{{path}}}`, {{#bodyParam}}{{paramName}}, {{/bodyParam}}
+        {{#hasFormParams}}convertFormParamsToString ? formParams.toString() : formParams, {{/hasFormParams}}{
 {{#hasQueryParams}}
             params: queryParameters,
 {{/hasQueryParams}}
@@ -258,7 +283,7 @@ export class {{classname}} {
             body: {{paramName}} == null ? '' : JSON.stringify({{paramName}}), // https://github.com/angular/angular/issues/10612
 {{/bodyParam}}
 {{#hasFormParams}}
-            body: formParams.toString(),
+            body: convertFormParamsToString ? formParams.toString() : formParams,
 {{/hasFormParams}}
 {{#isResponseFile}}
             responseType: ResponseContentType.Blob,

modules/swagger-codegen/src/main/resources/typescript-angular/encoder.mustache

@@ -1,5 +1,28 @@
-import { QueryEncoder } from "@angular/http";
+{{#useHttpClient}}
+    import { HttpUrlEncodingCodec } from '@angular/common/http';
+{{/useHttpClient}}
+{{^useHttpClient}}
+    import { QueryEncoder } from '@angular/http';
+{{/useHttpClient}}
 
+{{#useHttpClient}}
+/**
+* CustomHttpUrlEncodingCodec
+* Fix plus sign (+) not encoding, so sent as blank space
+* See: https://github.com/angular/angular/issues/11058#issuecomment-247367318
+*/
+export class CustomHttpUrlEncodingCodec extends HttpUrlEncodingCodec {
+    encodeKey(k: string): string {
+        k = super.encodeKey(k);
+        return k.replace(/\+/gi, '%2B');
+    }
+    encodeValue(v: string): string {
+        v = super.encodeValue(v);
+        return v.replace(/\+/gi, '%2B');
+    }
+}
+{{/useHttpClient}}
+{{^useHttpClient}}
 /**
 * CustomQueryEncoderHelper
 * Fix plus sign (+) not encoding, so sent as blank space
@@ -14,4 +37,6 @@ export class CustomQueryEncoderHelper extends QueryEncoder {
         v = super.encodeValue(v);
         return v.replace(/\+/gi, '%2B');
     }
-}
+}
+{{/useHttpClient}}
+