【发布时间】：2020-06-06 08:13:36
【问题描述】：
如何在响应式表单中使用 input type=file 重新填充我的文件？
我正在做一个项目，我有一个表单来提交数据（锻炼），该表单根据表单构建了一个列表。从那里，您可以进入查看提交的锻炼，并对其进行编辑。
当您单击“编辑锻炼”时，会打开相同的提交表单，这一次会填充所有数据。这是通过将“编辑锻炼”链接到 EditComponent 来完成的，然后 ngOnInit 检查路线参数。如果路线参数有id，那么它会使用锻炼数据初始化表单。
这一切都很好。
我遇到的问题特别与<input type="file"...> 的重新填充有关。
这是我去编辑时的表单初始化
首先，我将initForm() 上的所有变量设置为空白，然后如果editMode 为真（如果我正在编辑），那么它将使用来自服务器的数据填充每个空变量（或虚拟数据）。
private initForm() {
// set all values to empty
let workoutImageUrl = "";
let workoutTitle = "";
let workoutPhase = [];
let workoutType = "";
let workoutDuration = "";
let workoutSpecialty = [];
let workoutDescription = "";
let workoutZwo = "";
// check if in edit mode, and if so, make values equal to database data
if (this.editMode) {
const workout = this.workoutService.getWorkout(this.id);
workoutTitle = workout.title;
workoutImageUrl = workout.imageUrl;
workoutPhase = workout.phase;
workoutType = workout.type;
workoutDuration = workout.duration;
workoutSpecialty = workout.specialty;
workoutZwo = workout.zwo;
workoutDescription = workout.description;
this.imgSrc = workout.imageUrl;
console.log("workout that should be here: ", workout);
}
// Populate form either with empty data or editable data
this.workoutForm = new FormGroup({
title: new FormControl(workoutTitle, Validators.required),
imageUrl: new FormControl(workoutImageUrl),
phase: new FormControl(workoutPhase, Validators.required),
duration: new FormControl(workoutDuration, Validators.required),
type: new FormControl(workoutType, Validators.required),
specialty: new FormControl(workoutSpecialty, Validators.required),
zwo: new FormControl(workoutZwo, Validators.required),
description: new FormControl(workoutDescription, Validators.required)
});
}
当我为新的锻炼（标准形式）执行此操作时，没有问题。当我处于 EditMode 并尝试在 <input type="file"...> 中重新填充数据时，问题就出现了，如上所述。
现在，我的 workoutImageUrl 或 workout.imageUrl 来自我的 FireBase 存储提供的 Url，因此我可以看到输入类型存在问题的原因。如果我使用本地文件也会发生同样的情况，它不能重新填充到文件的输入类型。
我想这是由于安全问题，但这导致我的表单出现以下错误： 来自 Chrome：“错误 DOMException：无法在 'HTMLInputElement' 上设置 'value' 属性：此输入元素接受一个文件名，该文件名只能以编程方式设置为空字符串。” 来自 FF: "ERROR DOMException: "试图使用一个不可用或不再可用的对象"
当我编辑锻炼时，有什么方法可以“重新填充”我的图像？所以文件显示为锻炼中的当前项目？
如上所述，我尝试使用本地图像文件，结果相同。我也尝试过从表单组中完全删除 imageUrl，但这并没有帮助，因为我 希望 它位于表单组中。我还尝试将 workoutImageUrl 更改为与来自 Firebase 的 imgSrc 相同。如果我想显示当前的锻炼图像，这可以工作，但是当我提交时它不起作用，因为我收到当前图像为空的错误。
Here is a StackBlitz for this project（有点简化）。如果您单击列表中的锻炼，则可以选择“管理锻炼”和“编辑锻炼”以进入已填写表格的编辑页面（目前不适用于图片上传）。
WorkoutEditComponent 可以通过src / app / features / workouts-page / workout-edit 找到。你可以在这里看到图片上传的逻辑，但我认为这对这个特定问题并不重要。 StackBlitz 上的数据库存储不工作，但图像的上传工作正常（只是没有保存）。我放入了一个示例 API，以使这个 StackBlitz 的工作最小化。
WorkoutsListComponent 是显示提交的锻炼列表的位置。
我在编辑锻炼时查看此锻炼图像文件时，有什么方法可以保留它？同时，在编辑表格时不必重新上传图像？我将图像设置为显示在编辑页面的底部，但如果它显示在这里，它仍然不会重新上传或使用来自服务器的相同图像。我每次都必须重新上传图片。
如果有什么我可以解释或阐述的，请告诉我。
【问题讨论】：
标签： javascript html angular typescript firebase