I am facing an issue with my formArray which contains file upload inputs in each element. Whenever I upload an image in one input, it changes the values of other file inputs in different rows.
https://i.stack.imgur.com/3haZW.png
Current Behavior: Uploading a file in one input updates the value column of all rows.
Expected Behavior: The uploaded file should only appear in the value column of that specific row.
Can anyone provide assistance with this problem? :(
This is the 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>https://i.stack.imgur.com/eIpoY.png
This is the function to handle files 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');
}
}Initializing 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;
}