时间戳

首页 > 解决方案 > 角度上传文件的 PatchValue

angular - 角度上传文件的 PatchValue

问题描述

所以我有这样的编辑表单页面 在此处输入图像描述

并组成一个这样的小组

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()
  }

标签： angularangular-reactive-formsangular-forms

解决方案

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

推荐阅读