Angular 5 アプリにファイルをアップロードするためのフォームがあり、しばらく前に書いたコードからそのままコピーしたので、以前は機能していたと断言できます。
これが私の HTML コードです:
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="form-group">
<label>File:</label>
<input #theFile type="file" (change)="onFileChange($event)" accept=".png" class="form-control"
formControlName="content" />
<input type="hidden" name="fileHidden" formControlName="imageInput"/>
<!-- [(ngModel)]="model.content" -->
<div class="alert alert-danger" *ngIf="!form.prestine && form.controls.content.errors?.noFile">
Please provide a photo.
</div>
<div class="alert alert-danger" *ngIf="form.controls.content.errors?.fileTooBig">
The file is too big and won't uploaded. Maximum allowed size is 500kb.
</div>
</div>
<div class="form-group">
<label>Notes</label>
<textarea type="text" class="form-control" formControlName="notes" [(ngModel)]="model.notes" > </textarea>
</div>
<button type="submit" class="btn btn-primary" [disabled]="!form.valid">Submit</button>
<button class="btn btn-default" type="button" (click)="close(false);">Cancel</button>
</form>
以下は、fileUpload コントロールで使用される "onFileChange" メソッドです。
onFileChange($event)
{
if ($event.target.files.length > 0)
{
let ftu: File = null;
ftu = $event.target.files[0];
this.form.controls['content'].setValue(ftu);
this.model.content = $event.target.files[0];
}
}
以下は私が作成して使用したカスタム バリデーターのコードです。
import { FormControl } from '@angular/forms';
export class SekaniRootImageValidators
{
static sizeTooBig(control: FormControl)
{
if (!control.value)
{
return { noFile : true }
}
else if (control.value[0].size > 505000)
{
return { fileTooBig: true}
}
return null;
}
}
問題は、入力コントロールでファイルを選択するとすぐに、コンソールに次のエラー メッセージが表示されることです。
エラー DOMException: 'HTMLInputElement' の 'value' プロパティの設定に失敗しました: この入力要素はファイル名を受け入れますが、プログラムによって空の文字列にのみ設定できます。
このコードは以前は機能していたので、どこから始めればよいのかさえわかりません。どんな助けでも大歓迎です!
注意：有効な回答へのリンクは次のとおりです:Angular2: アップロードするファイルを変更しても、<input type="file"/> の検証は実行されません
ベストアンサー1
私の場合は、formControlName を削除しました。
<input type="file" (change)="onFileChange($event)">
そして.ts:
onFileChange(event) {
const reader = new FileReader();
if (event.target.files && event.target.files.length) {
const [file] = event.target.files;
reader.readAsDataURL(file);
reader.onload = () => {
this.data.parentForm.patchValue({
tso: reader.result
});
// need to run CD since file load runs outside of zone
this.cd.markForCheck();
};
}
}