Angular ngFor with dynamic adding of objects [closed]

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.

This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.

Closed 6 years ago.

Improve this question

Please check the video: https://screencast-o-matic.com/watch/cqQQj2tA22

I'm adding dynamically objects to an array and would like to set the values once the objects are added. Now when I'm adding a new object to the array all the input textboxes in the loop are resetting the value shown in the textbox although the array is keeping the correct properties in the code.

This is my markup:

<div *ngFor="let colorSet of quantity.colorSets; let k=index;">
    <div>
        <label>Color Sets:</label>
        <div>
            <mat-form-field>
                <input matInput [(ngModel)]="quantity.colorSets[k].setQ" value="{{quantity.colorSets[k].setQ}}" name="colorSetQ-{{index}}" type="text">
            </mat-form-field>
        </div>
    </div>
    <div>
        <label>Price:</label>
        <div>
            <mat-form-field>
                <input matInput [(ngModel)]="quantity.colorSets[k].price" value="{{colorSet.price}}" name="colorSetPrice-{{index}}" type="text">
            </mat-form-field>
        </div>
    </div>
</div>

And then the code:

model: any = {
    TenantId: '',
    CustomFieldName: '',
    quantities: []
};

newQuantity = {
    price: '',
    rangestart: '',
    rangeend: '',
    colorSets: []
};

colorSetInfo = {
    setQ: '',
    price: ''
}

addNewPriceSet(quantitySet) {
    if (quantitySet) {
        quantitySet.colorSets.push({
            setQ: '',
            price: ''
        });
        console.log(quantitySet);
        console.log(this.model);
    }
}

Can you try to change name="colorSetQ-{{index}}" to name="colorSetQ-{{k}}" — Bunyamin Coskuner
– Bunyamin Coskuner, Commented Sep 9, 2019 at 8:27
@Laziale I've posted it as an answer. Can you mark it as accepted? — Bunyamin Coskuner
– Bunyamin Coskuner, Commented Sep 9, 2019 at 8:34

Bunyamin Coskuner · Accepted Answer · 2019-09-09 08:33:45Z

1

You have a typo. You don't have index in your scope (within ngFor).

Change name="colorSetQ-{{index}}" to name="colorSetQ-{{k}}"

And

name="colorSetPrice-{{index}}" to name="colorSetPrice-{{k}}"

answered Sep 9, 2019 at 8:33

Bunyamin Coskuner

8,8892 gold badges31 silver badges50 bronze badges

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

1 Comment

halfer Over a year ago

There is no need to answer typo questions - there is a specific close reason just for that category.

Collectives™ on Stack Overflow

Angular ngFor with dynamic adding of objects [closed]

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related