Angular 9 загрузка файла без добавления файла в группу - PullRequest
Новая
       50

Angular 9 загрузка файла без добавления файла в группу

0 голосов
/ 29 апреля 2020

Я создал группу форм в своем HTML для приложения Angular 9. В этой группе форм есть функция загрузки файла. Загрузка работает правильно, когда вызывается функция handleFileInput, которую я вижу в журнале консоли под ней. Однако свойство файла по-прежнему равно NULL, когда я отправляю группу форм своему сервису. Я понимаю, что это связано с тем, что в моем конструкторе установлено значение NULL, но как я могу изменить свой код, чтобы файл в группе форм соответствовал загруженному файлу? Из того, что я прочитал, группа форм должна быть объявлена ​​в конструкторе. 

export class HelpComponent implements OnInit {

  form: FormGroup;
  srcPage = 'Test';
  fileToUpload: File = null;

  constructor(public fb: FormBuilder, private messageService: MessageService,
              public exportFilesService: ExportFilesService) {

  this.form = this.fb.group({
        summary: new FormControl('', [Validators.required]),
        description: new FormControl('', [Validators.required]),
        isurgent: [false],
        file: this.fileToUpload
      });
   }

  ngOnInit() {
  }

  handleFileInput(files: FileList) {
    this.fileToUpload = files.item(0);
    console.log(this.fileToUpload);
  }

  submitForm() {
      this.messageService.sendSupportRequest(this.form.get('summary').value , 
      this.form.get('description').value, this.form.get('isurgent').value, 
      this.srcPage, this.form.get('file').value);
      }
    }

Ответы [ 3 ]

1 голос
/ 30 апреля 2020

Во-первых, загрузка файла не обрабатывается Angular явно или с помощью ReactiveForms, как это.

Чтобы иметь возможность загружать файлы, вы можете сделать что-то вроде этого: в html file: 

<input type="file" (change)="handleFile($event)" />

И в ts: 

handleFile(event) {
        const formData: FormData = new FormData();

        const files=event.target.files;
        files.foreach(file=>{
            formData.append(file);
        })

        this.form.patchValue({file:formData});
        this.form.updateValueAndValidity();
    }

Во-вторых, FormBuilder fb, назначаемый вашей FormGroup form, должен выполняться внутри функции ngOnInit().

Что должно выглядеть так: 

form:FormGroup;

ngOnInit(){
this.form = this.fb.group({
        summary: new ['', [Validators.required]],
        description: ['', [Validators.required]],
        isurgent: [false],
        file: ['']
      });
   }
}

Надеюсь, это сработает !!

1 голос
/ 29 апреля 2020

Совет: «Из того, что я прочитал, группа форм должна быть объявлена ​​в конструкторе.», Переместите ее в OnInit

0 голосов
/ 30 апреля 2020

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

this.form = this.fb.group({
        summary: new FormControl('', [Validators.required]),
        description: new FormControl('', [Validators.required]),
        isurgent: [false],
        file: []
      });

И затем при назначении файла: 

handleFileInput(files: FileList) {
    this.form.patchValue({ file: files.item(0) });
  }

Кроме того, предложение переместить создание группы форм в ngOnInit() действует, но не решит Ваша конкретная проблема.

В настоящее время, когда вы создаете экземпляр формы, вы смешиваете конструктор форм (fb) и создаете экземпляры формы, которые вы сами контролируете. Внутри вызова fb.group({ такие значения, как [], являются сокращением для создания нового элемента управления формы. Таким образом, чтобы последовательно использовать построитель форм, измените экземпляры summary и description на: 

summary: ['', [Validators.required]],
description: ['', [Validators.required]],
...