Ionic v4 ion-textarea whithin for loop

@sisdev wrote:

Hey guys,

I have an app for taking pictures either from camera or from the gallery and to save them as base64. Obviously it saves the pictures after the save button was clickt.
This bit works fine.

Now I wanted to add an ion-textarea under each picture to let the user put different comments for each picture and after clicking on the save button, all data would be transferred “somewhere”…
This bit doesn’t work because I don’t know how to get the value of ion-textarea

What I’ve done so far is:
.TS file:

public photos;
ngOnInit() {
      ....
      this.photos = [];
      ....
}

takePhoto() {
      ....           
      this.camera.getPicture(options).then(
            imageData => {
                this.base64Image = "data:image/jpeg;base64," + imageData;
                this.photos.push(this.base64Image);                
            }
      ....
}

.html file:

<form #collectForm="ngForm" (ngSubmit)="saveCollectedData(collectForm)">
        <ion-grid *ngIf="photos">
            <ion-row responsive-sm wrap>
                    <ion-col size="6" *ngFor="let photo of photos; let id = index">
                        <ion-card>                            
                            <img [src]="photo" />
                            <ion-textarea rows="4" cols="5"></ion-textarea>
                        </ion-card>
                    </ion-col>
            </ion-row>
        </ion-grid>

        <ion-button class="submit-btn" expand="block" type="submit">Save</ion-button>
    </form>

Now my ion-textarea has to have a dynamic name (I think) but somehow I can’t figure that out.
If I write the ion-textarea like that:

<ion-textarea rows="4" cols="5" [name]="piccomment" [(ngModel)]="collectForm.piccomment"></ion-textarea>

With this I would have the same comment for all pictures which is wrong.

Any ideas how to solve that?

Thanks

Posts: 1

Participants: 1

Read full topic