Winkel-5 Datei-upload: Fehler beim festlegen der 'value' - Eigenschaft auf 'HTMLInputElement'
Habe ich ein Formular für den Upload einer Datei in einem Winkelbereich 5-app, und als ich es kopiert habe genau aus einem code, den ich geschrieben hatte, eine Weile her, aber ich kann schwören, es hatte vorher funktioniert.
Hier ist mein HTML code:
<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>
Hier ist die "onFileChange" - Methode verwendet, in der fileUpload-control:
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];
}
}
und hier ist der code für die benutzerdefinierte validator-ich habe geschrieben und verwendet:
import { Control } von '@eckig/Formen';
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;
}
}
Nun das Problem ist sobald ich eine Datei auswählen, in der input-Kontrolle, bekomme ich diese Fehlermeldung in der Konsole:
FEHLER DOMException: Fehler beim festlegen der 'value' - Eigenschaft
'HTMLInputElement": Diese input-element einen Dateinamen akzeptiert, die möglicherweise
nur programmgesteuert auf die leere Zeichenfolge gesetzt.
Dieser code vorher funktioniert hat, also ich habe keine Ahnung, wo Sie überhaupt anfangen. Jede Hilfe ist willkommen!
ACHTUNG: Hier ist ein link zu einer funktionierenden Antwort: Angular2: Validierung für <input type="file"/> wird nicht ausgelöst, wenn die änderung der Datei zum hochladen
Du musst angemeldet sein, um einen Kommentar abzugeben.
Wie die Fehlermeldung sagt, Sie können nur einen leeren string in eine Datei input-Wert um die Auswahl zu löschen. Es öffnen könnte, Sicherheitsrisiken sonst. Ich kann mir nicht vorstellen, wie dieser code kann je gearbeitet habe. Vielleicht in einigen nicht-standard (schlechten) browser?
Sollte nicht, dass der code funktioniert, wenn Sie nur entfernen Sie die Zeile, warum tun Sie müssen den gleichen Wert für den input, es hat schon irgendwie?
Edit: scheint ein custom ValueAccessor ist erforderlich für die überprüfung von Datei-Eingänge. Lösung in einem anderen Antwort: Angular2: Validierung für <input type="file"/> wird nicht ausgelöst, wenn die änderung der Datei zum hochladen
Nicht den Wert der input-Eigenschaft der ausgewählten Datei. Stattdessen setzen Sie einfach den Inhalt der Datei in eine variable und anfügen", um das request-Objekt separat.
Für die Datei-Eingabe , weisen Sie einfach die auch.Ziel.Wert als Eingangsgröße, so dass der Benutzer die aktuelle Datei ausgewählt.
In meinem Fall habe ich Sie gerade entfernt die formControlName:
Und .ts: