Angular 8 反应式输入类型 "file" 无法识别边缘上的值

Question

我正在使用private _fb: FormBuilder在Angular 8中构建我的表单。我的表单是这样初始化的

this.itemForm = this._fb.group({
title: ['', [Validators.required, this._systemSvc.nonSpaceString]],
file: ['', Validators.required],
categories: [''],
tags: ['']
});

模板是

<form class="needs-validation" [formGroup]="itemForm" (ngSubmit)="createPost()">
<div class="form-row">
<div class="col-md-4 mb-3">
<div class="form-row mb-3">
<div class="col-md-12 mb-3">
<label class="text-primary"><strong>Title</strong></label>
<input type="text" formControlName="title" class="form-control"
[ngClass]="{ 'is-invalid': checkError('title') }">
<div *ngIf="checkError('title')" class="invalid-feedback">
<div *ngIf="f.title.errors.required">Title is required</div>
<div *ngIf="f.title.errors.whitespace">Title can't be blank space</div>
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-md-6 mb-3">
<label class="text-primary"><strong>Categories</strong></label>
<select formControlName="categories" class="custom-select">
<option value="">--Select categories--</option>
<option value="Funny">Funny</option>
<option value="Music">Music</option>
<option value="Adventure">Adventure</option>
</select>
</div>
</div>
<div class="row mb-3">
<div class="col-md-12 mb-3">
<label class="text-primary" for="tags"><strong>Tags</strong></label>
<div>
<ng-container *ngFor="let tag of parsedTags;">
<a href="" class="mr-1">#{{tag}}</a>
</ng-container>
</div>
<input id="tags" type="text" formControlName="tags" class="w-100"
(input)="onTagsChange($event.target.value)">
</div>
</div>
</div>
<div class="col-md-7 mb-3 offset-md-1">
<div class="form-row mb-3">
<div class="col-md-12 mb-3">
<label class="text-primary" for="upload"><strong>Choose file</strong></label>
<div class="custom-file">
<label class="custom-file-label" for="upload">Choose file</label>
<input type="file" class="custom-file-input" formControlName="file" id="upload"
(change)="handleFileInput($event.target.files)" accept="audio/*, video/*, image/*"
[ngClass]="{ 'is-invalid': checkError('file') }">
<div *ngIf="checkError('file')" class="invalid-feedback">
<div *ngIf="f.file.errors.required">File is required</div>
</div>
</div>
</div>
</div>
<div class="form-row mb-3">
<div class="col-md-12 mb-3">
<img *ngIf="uploadedFile" src="{{uploadedFile}}" class="w-100" id="previewImg">
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-2 form-group">
<button type="button" id="cancelBtn" class="btn btn-primary mr-2" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-success">Post</button>
</div>
</div>
</form>

每件事在Firefox和Chrome上都能很好地工作。但是当涉及到 Edge 时，用户选择文件，但反应式表单无法识别所选文件。其他控件(如输入 = 文本和下拉列表(在 Edge 上仍然可以使用。表单无效，仅表示文件为空。这是表单的快照

controls: Object
dirty: true
disabled: false
enabled: true
errors: null
invalid: true
parent: undefined
pending: false
pristine: false
root: Object
status: "INVALID"
statusChanges: Object
touched: true
untouched: false
updateOn: "change"
valid: false
validator: null
value: Object
categories: "Funny"
file: ""
tags: "asd"
title: "asd"

Answer 1

我遇到了同样的问题，我已经通过手动将验证设置为null来解决。

创建函数，其中检查输入是否有文件，并在其中使用以下命令：

this.itemForm.controls['file'].setErrors(null)

它真的有效。