Angular change property value of object array in html

Question

So I have an object like this:

class FileData {
    file: File;
    description: string;
}

In my components.ts I have an array of this object that contains an unknown amount. My component.html looks like this:

<tr *ngFor="let file of fileArray">
    <td>
        <input type="text" class="form-control" [(value)]="file.description" placeholder="Description">
    </td>
    <td>
        <input type="text" class="form-control" [(value)]="file.file.name" placeholder="File name">
    </td>
</tr>

My goal was that I can change the values of each property within the array with two way binding but this doesn't work.

Whats the right way to do this?

(Usecase: The Array contains X Elements. each one hase a file but no desciption. I want to fill the description or Change the file name)

I think you look for ngModel

Benoit Messiaen
– Benoit Messiaen

2020-02-06 08:30:38 +00:00
Commented Feb 6, 2020 at 8:30 — Benoit Messiaen
– Benoit Messiaen, Commented Feb 6, 2020 at 8:30

StyrianDev · Accepted Answer · 2020-02-06 08:30:07Z

1

You need to use ngModel instead of value to bind values from an input:

[(ngModel)]="file.description"
[(ngModel)]="file.file.name"

answered Feb 6, 2020 at 8:30

StyrianDev

2391 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

LastChar23 Over a year ago

Now it says Can't bind to 'ngModel' since it isn't a known property of 'input'. Do I need to import something?

Muhammed Albarmavi Over a year ago

you need to import FormsModule 🤔🤔

StyrianDev Over a year ago

Ah of course, you have to enable the FormsModule. Into the imports add FormsModule.

Collectives™ on Stack Overflow

Angular change property value of object array in html

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related