IE：将 FormData polyfill 添加到 angular 与 formly答案

【问题标题】：IE: Add FormData polyfill to angular with formlyIE：将 FormData polyfill 添加到 angular 与 formly
【发布时间】：2020-01-22 23:01:24
【问题描述】：

我在 Angular 项目中正式使用 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']
      }
    }
  ];

【问题讨论】：

标签： angular internet-explorer polyfills ngx-formly

【解决方案1】：

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) ...
  }
}

【讨论】：

我希望有办法在正式的范围内做到这一点，这是他们使用 FormData.get 的文件上传组件，但它已被嵌入，问题不在提交，所以我目前正在定制字段充当假文件上传字段，而真正的字段位于表单之外。
我明白了，已经尝试在polyfills.ts 文件中导入formdata-polyfill 我认为应该添加它。

【解决方案2】：

没有看到任何好的解决方案，但我确实做了一个解决方法，在下面发布，以防其他人遇到这个问题。请注意，这是一种解决方法，而不是正确的解决方案。

在这种情况下，我在页面上制作了一个隐藏表单，并正式创建了一个假文件上传字段，以模拟隐藏表单上传字段的事件。

假上传.component.ts

import { Component } from '@angular/core';
import { FieldType } from '@ngx-formly/material';
import { CustomTemplateOptions } from '../../../../../../kup-core/src/lib/models';

@Component({
  selector: 'app-fake-upload-field',
  template: `
    <div>
      <button
        (click)="onClick()"
        [id]="id"
        type="file"
        [formControl]="formControl"
        [formlyAttributes]="field"
        (change)="onChange()"
        ngDefaultControl
        [name]="id"
        mat-stroked-button
      >
        Choose File
      </button>
      <input
        type="text"
        [value]="to.data.filename"
        class="fake-file-upload-input"
        (change)="onChange()"
      />
    </div>
  `,
  styles: [
    `
      .fake-file-upload-input {
        padding: 0;
        margin: 0;
        border: none;
      }
    `
  ]
})
export class FakeUploadComponent extends FieldType {
  to: CustomTemplateOptions;

  onClick() {
    document.getElementById('realFileUpload').click();
  }

  onChange() {}
}

然后手动将文件值添加回正式表单模型，

然后隐藏表单提交按钮创建了一个虚假的表单提交面板，以老式方式模拟表单表单的事件和验证。

  onHiddenFileUploadChange($event) {
    const el: any = document.querySelector('.fake-file-upload-input');

    this.stagedFile = $event.target.files;
    this.stagedFilename = $event.target.files[0].name;

    el.value = this.stagedFilename;
    this.checkForm();
  }

  triggerSave() {
    const form: HTMLElement = document.getElementById('importForm');
    const button: HTMLElement = form.querySelector('button[type=submit]');
    button.click();
  }

 private onImportTypeChanged(value: FormlyFieldConfig[]): void {
    this.viewModel.importTypes.map(type => {
      if (type.name === value[0].formControl.value) {
        value[1].formControl.patchValue(type.description);
        this.stagedType = type.name;
      } else if (!value[0].formControl.value) {
        this.stagedType = '';
      }
    });
  }

这是我能找到的唯一方法来解决 formly 缺乏传统 ie 的支持，而无需正式分叉并直接对其进行自定义。

【讨论】：