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

Schreibe einen Kommentar