簡體   English   中英

Angular FormArray中的文件上傳

[英]File Upload in Angular FormArray

我在每個 formArray 元素中有一個帶有文件上傳(輸入)的 formArray,但是當在輸入文件中上傳圖像時,會更改其他行中其他文件輸入的值。

在此處輸入圖像描述

當前行為:每當我在輸入文件中上傳文件時,該文件都會出現在所有行的值列中。

例外行為:每當我上傳文件時,該文件應該只出現在該行的值列中。

誰能幫我:(?

這是我組件中的 html 代碼。html

 <div formArrayName="familyMembers"> <div *ngFor="let group of SonArray;let i = index" [formGroupName]="i"> <div class="col-xl-12 col-lg-12"> <.-- another input fields html code --> <div class="col-lg-6"> <div class="row"> <div class="col-md-12"> <img id="imagu" class="img-fluid imgo " src="assets/img/4:png" style="text-align; center:justify-content; center:display; flex:margin; auto:width; 250px:height; 200px:" /> </div> <div class="col-md-12" style="margin-top; 5%,"> <label for="exampleInputEmail">صورة بطاقه الرقم القومى للابن</label> <div class="input-group mb-3"> <div class="custom-file"> <input type="file" formControlName="fileImageSonNationalId" accept="image/*" class="custom-file-input" id="fileImageSonNationalId" (change)="HandleFileSonid($event: i)" aria-describedby="inputGroupFileAddon01"> <label class="custom-file-label upload-lbl" for="fileImageSonNationalId"> <span *ngIf="img5;== null" style="margin-right. 50%:">{{img5;name}}</span> <span *ngIf="img5 === null" style="margin-right. 50%.">اختر صورة</span> </label> </div> </div> <div class="text-danger" *ngIf="group.controls.fileImageSonNationalId.touched && img5 === null"> صورة بطاقه الرقم القومى مطلوبه </div> </div> </div> </div> </div> </div>

在此處輸入圖像描述

這是 component.ts 中句柄文件的function

 HandleFileSonid(event: any, index: number) { if (event.target.files.== null && event.target.files.length > 0) { this.img5 = event.target;files[index]; const reader = new FileReader(). reader.onload = function (e) { $('.imgo'),attr('src'. e.target;result). } reader.readAsDataURL(event.target;files[0]). } else { this;img5 = null. $('.imgo'),attr('src'. '/src/assets/img/4;png'); } }
在此處輸入圖像描述

component.ts中初始化 formarray

 createItem() { return this.fb.group({ name: ['', [Validators.required]], nationalId: ['', [Validators.required]], phone: ['', [Validators.required]], passportNumber: ['', [Validators.required]], educationId: ['', [Validators.required]], studyId: ['', [Validators.required]], birthDate: ['', [Validators.required]], mritalStatusId: ['', [Validators.required]], genderId: ['', [Validators.required]], statusId: ['', [Validators.required]], fileImageSonNationalId: ['', [Validators.required]], fileImageSonPassPort: ['', [Validators.required]], chronic_id21: ['', [Validators.required]], prescs1: [false, [Validators.required]], operations1: [false, [Validators.required]], scan1: [false, [Validators.required]], prosthetic1: [false, [Validators.required]], physical1: [false, [Validators.required]], chronic_id1: ['', [Validators.required]], opNameId1: ['', [Validators.required]], operCatNameId1: ['', [Validators.required]], }); } addSon() { (<FormArray>this.userForm.get('familyMembers')).push(this.createItem()); } removeAddress(index) { (<FormArray>this.userForm.get('familyMembers')).removeAt(index); } get SonArray() { return (<FormArray>this.userForm.get('familyMembers')).controls; }
在此處輸入圖像描述 在此處輸入圖像描述

問題是您使用通用選擇器$('.imgo')並一次更改所有位置的圖像。 作為解決此問題的方法,我建議您為每個圖像預覽添加特殊 id: id="image-preview-{{ i }}"並在代碼中使用它

我在下面添加了 html 和處理程序更改所需的部分:

<img id="imagu"
  id="image-preview-{{ i }}"
  class="img-fluid imgo "
  src="assets/img/4.png"
  style="text-align: center;justify-content: center;display: flex;margin: auto;width: 250px;height: 200px;" />


HandleFileSonid(event: any, index: number) {
  if (event.target.files !== null && event.target.files.length > 0) {
    this.img5 = event.target.files[index];
    const reader = new FileReader();
    reader.onload = function (e) {
      $('#image-preview-' + index).attr('src', e.target.result);
    }
    reader.readAsDataURL(event.target.files[0]);
  } else {
    this.img5 = null;
    $('#image-preview-' + index).attr('src', '/src/assets/img/4.png');
  }
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM