角度上传文件的PatchValue

问题描述

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

并组成这样的团体

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

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

this.editMateri.patchValue(this.currentMateri);

一切正常，但是问题出在缩略图文件上载输入上，默认情况下它为null，因此如果我更新除缩略图以外的任何内容，我的缩略图将变为空白，缩略图设置为null。我一直在为此寻找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()
  }

解决方法

我想您已经为每个字段正确添加了 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>