Angular FormArray中的文件上传

Question

I have a formArray with file upload (input) in each formArray element but when upload image in input file will change other file inputs's value in other rows.

Current Behavior: Whenever I upload file in an input file, this file appearing in the value column of all row.

Excepted Behavior: Whenever I upload file, this file should appear in the value column of that row only.

can anyone help me:(?

this is html code in my component.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>

this is function of handle file in component.ts

 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'); } }

initialize formarray in component.ts

 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; }

Answer 1

The problem is that you use common selector $('.imgo') and change images in all places in one time. As the way to solve this problem, I suggest, that you add the special id: id="image-preview-{{ i }}" for every image preview and use it in your code

I have added needed parts below for changes in html and for handler:

<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');
  }
}