Angular patchvalue returns ERROR DOMException: An attempt was made to use an object that is not, or is no longer, usable

  angular, javascript, typescript

I’m Angular beginner! After selecting a file I get ERROR DOMException: An attempt was made to use an object that is not, or is no longer, usable

HTML:

<div class="col-lg-12">
              <div class="row">
                <div class="col-lg-4">
                  <label class="lic">Preslika prometne dozvole</label>
                  <div class="form-group">
                    <input type="file" #filePicker (change)="onTLicPicked($event, i)" formControlName="TLic">
                    <div class="error" *ngIf="submitted && added && truck.controls.TLic.errors?.required">Lic is required</div>
                  </div>
                </div>
                <div class="col-lg-4">
                  <label class="lic">Preslika licence</label>
                  <div class="form-group">
                    <input type="file" #filePicker (change)="onLicPicked($event, i)" formControlName="Lic">
                    <div class="error" *ngIf="submitted && added && truck.controls.Lic.errors?.required">Lic is required</div>
                  </div>
                </div>
                <div class="col-lg-4">
                  <label class="lic">Preslika osiguranja CMR</label>
                  <div class="form-group">
                    <input type="file" #filePicker (change)="onCMRLicPicked($event, i)" formControlName="CMRLic">
                    <div class="error" *ngIf="submitted && added && truck.controls.CMRLic.errors?.required">Lic is required</div>
                  </div>
                </div>
              </div>
            </div>

COMPONENT:

onTLicPicked(event: Event, i: number) {
    const file = (event.target as HTMLInputElement).files[0];
    let arrayControl = this.trucks();
    arrayControl.at(i).patchValue({"TLic": file});
    arrayControl.at(i).get("TLic").updateValueAndValidity();
  }

  onLicPicked(event: Event, i: number) {
    const file = (event.target as HTMLInputElement).files[0];
    let arrayControl = this.trucks();
    arrayControl.at(i).patchValue({"Lic": file});
    arrayControl.at(i).get("Lic").updateValueAndValidity();
  }

  onCMRLicPicked(event: Event, i: number) {
    const file = (event.target as HTMLInputElement).files[0];
    let arrayControl = this.trucks();
    arrayControl.at(i).patchValue({"CMRLic": file});
    arrayControl.at(i).get("CMRLic").updateValueAndValidity();
  }

Component uploads only 2 files. The 3rd file is not patched with patchvalue and browser throws ERROR DOMException: An attempt was made to use an object that is not, or is no longer, usable. Thank you in advance!

Source: Ask Javascript Questions

LEAVE A COMMENT