Question

我正在尝试将FileReader中的数据手动设置为控件值（“图像”）。当我将“ reader.result”（存储二进制图像数据）设置为“ image” FormControl时，出现错误：

错误DOMException：无法在'HTMLInputElement'上设置'value'属性：此输入元素接受文件名，该文件名只能以编程方式设置为空字符串。

我的组件：

formInitBuilder() {
    this.formProducts = this.fB.group(
      {
          name: new FormControl('', Validators.required),
          description: new FormControl(''),
          detailedDescription: new FormControl(''),
          price: new FormControl('', Validators.minLength(1)),
          isNewProduct: new FormControl(true),
          promotionalProduct: new FormControl(true),
          categoryId: new FormControl('', Validators.required),
          image: new FormControl('', Validators.required)
      });
  }

  uploadImage(file: FileList) {

      this.fileToUpload = file.item(0);
      let reader = new FileReader();
      console.log(reader.result);
      reader.onload = (event: any) => {
        this.formProducts.controls['image'].setValue( reader.result);
        };
      reader.readAsDataURL(this.fileToUpload);
      }

HTML模板：

    <div class="form-group">
        <div class="input-group mb-3">
          <div class="custom-file">
            <input type="file"  #Image accept="image/*"(change)="uploadImage($event.target.files)"   class="custom-file-input" id="inputGroupFile02" formControlName="image">
            <label class="custom-file-label" for="inputGroupFile02">Select image</label>
          </div>
        </div>
      </div>

我想将二进制图像数据保存在FormControl图像中。

Answer 1

在使用formBuilder（ docs ）时不要使用new FormControl()，它应该类似于：

this.formProducts = this.fb.group({
  name: ['', Validators.required],
  description: [''],
});

删除您的formControlName="image" （顺便说一下，它应该是[form]="formProducts"父级的子级），因为您已经将输入值“链接”到您的FormGroup中uploadImage()方法，并且因为如您的错误消息中所述，它试图设置value属性而不是filename。

如果要执行自己的FileInputValueAccessor指令，可以查看this answer。

手动设置FormBuilder控件的值时发生DOMException

1 个答案: