时间戳

首页 > 解决方案 > IE：将 FormData polyfill 添加到 angular 与 formly

angular - IE：将 FormData polyfill 添加到 angular 与 formly

问题描述

我在一个角度项目中正式使用https://www.npmjs.com/package/formdata-polyfill和 nxg 我的表单有一个正式配置的文件上传字段。现在我们必须支持 IE，并且需要一个 polyfill 才能使其工作，但我不知道如何添加它。错误是 IE 不支持 FormData.get 并且需要 polyfill。

polyfills.ts

...
import 'formdata-polyfill';

form.component.ts

...
this.fields = [
    {
      key: 'file',
      id: 'field_import_file',
      type: 'file-upload',
      templateOptions: {
        required: true,
        fieldName: 'Import File',
        floatLabel: 'always',
        appearance: 'outline'
      },
      validation: {
        validators: ['file-upload']
      }
    }
  ];

标签： angularinternet-explorerpolyfillsngx-formly

解决方案

formdata-polyfill应该导入polyfills.ts文件以便在应用程序之前加载。

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

...
import 'formdata-polyfill';

并且要提交文件，一旦表单触发提交事件，您需要Formdata基于提交的模型构造一个实例。

export class AppComponent {
  ...

  onSubmit(model) {
   const formData: FormData = new FormData();
   formData.append('file', model.file);
   formData.append('firstname', model.firstname);
   ...

   // send
   this.http.post(url, formData) ...
  }
}

推荐阅读