角度上传文件的 PatchValue

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>