Ввод файла с помощью ng-модели во вложенных компонентах вызывает InvalidStateError - PullRequest
Новая
       19

Ввод файла с помощью ng-модели во вложенных компонентах вызывает InvalidStateError

0 голосов
/ 16 апреля 2019


У меня есть ngform, который включает в себя отдельный компонент для загрузки файлов. Когда я пытаюсь ввести файл в этот компонент, браузер выдает эту ошибку: enter image description here

Я не понимаю, откуда это может быть, вот мой родительский HTML: 

<form
  novalidate
  #logosForm="ngForm"
  (ngSubmit)="brandingService.setLogos(logosForm.value)">
    <div class="columns">
      <div class="column">
        <app-file-upload
          title="Logo principal"
          name="logo"
          label="Logo.png">
        </app-file-upload>
      </div>
    </div>

Вот мой дочерний html (app-file-upload): 

 <div class="upload">
  <span class="upload__label" [translate]="title"></span>
  <div class="file is-fullwidth">
    <label class="file-label">
      <input
      class="file-input"
      type="file"
      accept=".png, .jpg, .ico"
      [name]="name"
      (change)='handleFileInput($event)'
      [(ngModel)]="file">
      <span class="file-cta">
        <span class="file-icon">
          <i class="fas fa-upload"></i>
        </span>
      </span>
      <span class="file-name">
        {{label}}
      </span>
    </label>
  </div>
  <figure *ngIf="file" class="image previsualisation" [ngClass]="{'is-128x128': name == 'logo', 'is-48x48': name == 'favicon'}">
      <img [src]="file">
  </figure>
</div>

А вот тс ребенка: 

  export class FileUploadComponent {
  file: string | ArrayBuffer;
  @Input()
  title: string;
  @Input()
  name: string;
  @Input()
  label: string;

  constructor() { }

  handleFileInput(event: Event): void {
    const userFile: File = (<HTMLInputElement> event.target).files[0];
    if (userFile) {
      this.label = userFile.name;
      const reader: FileReader = new FileReader();
      reader.onload = ((e: Event): void => {
        const filereader: FileReader = <FileReader> e.target;
        this.file = filereader.result;
      });
      reader.readAsDataURL((<HTMLInputElement> event.target).files[0]);
    }
  }
}

Как я понимаю, ошибка может быть связана с тем, что я пытаюсь привязать файловый объект (или строку | ArrayBuffer) и поэтому пытаюсь изменить значение этого объекта, а это запрещено. Я не понимаю, как я мог бы использовать ngModel по-другому, чтобы получить дочерний компонент для вывода файла, загруженного пользователем. Если у вас есть идея, пожалуйста, помогите мне, спасибо!

Ответы [ 2 ]

1 голос
/ 16 апреля 2019

Хотя я не сразу вижу ошибку в вашем коде, поля ввода файлов в сочетании с NgModel показывают некоторые очень странные поведения.

Бен Надель недавно написал статью о том, как правильно получить доступ к атрибуту входных значений файла, используя ControlValueAccessor, возможно, вы можете принять его метод вместо .

0 голосов
/ 16 апреля 2019

Предлагаю перейти по этой ссылке.используйте этот способ для загрузки файла, избегая дублирования файлов, максимальный размер. 

/* Add application styles & imports to this file! */
@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css')
<div>
	<label class="btn btn-primary">
    Upload Documents <input type="file" #fileUpload (change)="fileChangeEvent($event)" onclick="this.value=null" multiple hidden style="display:none;">
  </label>
</div>
<ul>
  <li *ngFor="let fileName of selectedFileNames">{{fileName}} <button (click)="removeFile (fileName)" style="cursor: pointer;"><i class="fa fa-times"></i></button>
  </li>
</ul>

// Код машинописного текста: Код машинописного текста см.

Рабочая демонстрация

...