[SOLVED] Ionic v4 ion-textarea whithin for loop

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

any idea about my problem guys?

Hello,

you can create a object that holds your picture and your comment liek
{photo:this.base6Image, comment: ''}
and push this object to your array.
in your ngFor you can access it like photo.photo and photo.comment and this points always to the field of that object.
In your solution collectForm.piccomment points always to the same field.

hint. If you change to reativeForms, then you can not use ngModel anymore.

Bewst reagrds, anna-liebt

1 Like

Thanks for the hint with object. I could finally solve the problem.
.ts

public newPics = [{
        picture: "",
        comment: ""
    }];

constructor() {
        this.newPics = [];
}

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

.html

<ion-grid *ngIf="photos">
        <ion-row>
            <ion-col size="6" *ngFor="let picsData of newPics; let id = index">
                <ion-card>
                    <img [src]="picsData.picture" />
                    <ion-textarea rows="4" cols="5" [(ngModel)]="picsData.comment"></ion-textarea>
                </ion-card>
            </ion-col>
        </ion-row>
    </ion-grid>

    <ion-button expand="block" (click)="saveCollectedData()">Save</ion-button>

I don’t need the form anymore.
Now in my saveCollectedData function I can access the this.newPics and transfer them.

Cheers

Hello,
I personnal prefer using interfaces. You define outside of your class your interface

 interface pic {
  picture: string;
  comment: string;
}

Inside you create a array like

newpics: pic[] = [];

and use it in the same way, including intellisence.

Best regards, anna-liebt

Yes using interfaces is what I do too but just if I have big data structures.

Auf jeden Fall, vielen Dank für deine Antworten :wink: