Визуализация динамического массива ввода

Question

Я пытаюсь визуализировать динамический массив массива (при нажатии «+» должен быть добавлен новый), но всегда, когда я помещаю какой-либо файл в поле ввода сообщения («Nenhum Arquivo Selecionado», что означает «Файл не работает»). 't Exist ") остается на экране.

Однако, если я проверю информацию на this.filterForm.get ('Documents'), строка заполнится правильно.

У кого-нибудь есть предложение исправить эту ошибку?

protocolo.component.ts

items: FormArray;

  filterForm = new FormGroup({
    IdProtocolo: new FormControl(),
    Documentos: this.formBuilder.array([ this.createItem() ]
  );

  ngOnInit() {
    this.items = this.filterForm.get('Documentos') as FormArray;
  }

  createItem(): FormGroup{
    return this.formBuilder.group({
      filename: '',
      filetype: '',
      value: ''
    })
  }

  addItem(){
    this.items.push(this.createItem());
  }

  removeItem(index){
    if(this.items.length > 1) {
      this.items.removeAt(index);
    }
  }

  onFileChange(event: any, index: any) {
    let reader = new FileReader();

    if(event.target.files && event.target.files.length > 0) {
      let file = event.target.files[0];
      reader.readAsDataURL(file);
      this.items.at(index).patchValue({
        filename: file.name,
        filetype: file.type,
        value: (reader.result as string).split(',')[1]
      })
    }
  }

protocolo.component.html

<div *ngFor="let item of filterForm.value.Documentos; let i = index;">
  <div class="row" style="margin-bottom: 10px;">
      <div class="col-md-4">
        <input type="file" formControlName="Documentos" (change)="onFileChange($event, i)">
      </div>
      <div class="col-md-8">
        <button class="btn btn-success-tce" (click)="addItem()">+</button>
        <button class="btn btn-success-tce" (click)="removeItem(i)"style="margin-left: 5px">-</button>
      </div>
  </div>

Answer 1

[Обновлено] Возможно, неправильная реализация formArray.Я не вижу formArrayName в вашем шаблоне.Я бы реализовал это как

В вашем шаблоне

<p> Dynamic File Form </p>
<form [formGroup]="someForm" (submit)="formSubmit()">
  <div formArrayName="documents">
    <div *ngFor="let item of files?.controls; let i = index;"> 
      <input type="file" placeholder="Upload file" [formControlName]="i" (change)="onFileChange($event, i)"/>
    </div>
  </div>
  <button type="submit"> Submit </button>
</form>

<button type="button" (click)="addFileControl()"> Add File </button>

В вашем компоненте.

  initForm() {
    this.someForm = this.fb.group({
      documents: this.fb.array([this.fileControl])
    })
  }

  get files() {
    return this.someForm.get('documents') as FormArray;
  }

  get fileControl() {
    return this.fb.group({
      file_item: [null]
    })
  }

  addFileControl() {
    this.files.push(this.fileControl);
  }

  formSubmit() {
    console.log(this.someForm.value);
  }

  onFileChange(event, i) {
    let reader = new FileReader();

    if (event.target.files && event.target.files.length) {
      const [file] = event.target.files;
      reader.readAsDataURL(file);

      reader.onload = () => {
        this.files.controls[i].get('file_item').setValue(reader.result);

        // need to run CD since file load runs outside of zone
        this.cd.markForCheck();
      };
    }
  } 

Вот пример stackblitz .Это даст вам вывод в формате base64, но вы также можете получить его в формате файла, изменив.

onFileChange(event, i) {
  if (event.target.files && event.target.files.length) {
    this.files.controls[i].get('file_item').setValue(event.target.files;);
   }
}

Примечание: - Это просто грубый код, но он выполняет свою работу:).