angular - 以 Angular 上传文件的补丁值

Question

所以我有这样的编辑表单页面

然后像这样组成一个小组

this.editMateri = this.fb.group({
  name: [''],
  description: [''],
  thumbnail: [null],
  isPublish: this.status,
  materialCreatorCode: [''],
  tags: this.selectedTags
});

然后我从服务器获取数据并使用 patchValue 将值设置为表单

this.editMateri.patchValue(this.currentMateri);

一切正常，但问题在于缩略图文件上传输入，默认情况下它为空，因此如果我更新缩略图以外的任何内容，我的缩略图将变为空白，缩略图设置为空。我一直在为此寻找 stackblitz 代码，但我没有找到任何代码，有人可以帮助我吗？

编辑

在我的 html 中是这样的

<div class="form-group">
    <label for="exampleInputEmail1" class="label">Thumbnail</label>
    <input type="file" nbInput fullWidth (change)="uploadFile($event)">
</div>

像这样的 uploadFile 函数

  uploadFile(event) {
    const file = (event.target as HTMLInputElement).files[0];
    this.editMateri.patchValue({
      thumbnail: file
    });
    this.editMateri.get('thumbnail').updateValueAndValidity()
  }

Answer 1

我想您已经为每个字段正确添加了 formControlName。这就是一切正常工作的原因。

但是在上传缩略图的输入中，你错过了使用formControlName。

将其添加到 html 中后，它应该可以正常工作。

请引用以下html代码进行替换。

<div class="form-group">
    <label for="exampleInputEmail1" class="label">Thumbnail</label>
    <input type="file" nbInput fullWidth formControlName="thumbnail" (change)="uploadFile($event)">
</div>