Angular 4 : copy an array to save initial values but both arrays are updated by the form

Question

I'm a beginner and working on an app built with JHipster and using Angular 4.3.

I'm working on a form in which a user can edit colors. I have to save the initial values in case a user edits colors, but doesn't finally validate the save (confirmation modal). So I have to return to the initial values. But actually, when I make a copy of the initial values, both arrays are updated by the form values.

My code looks like this :

export class MyComp implements OnInit {
    initialColors: Color[]; // the object Color has an id, a name and a rgb as attributes
    colors: [];

    constructor(private service: ColorService, private confirmationDialogService: ConfirmationDialogService) {}

    ngOnInit() {
        this.getColors();
    }

    getColors() {
        this.service.query.subscribe(
            this.colors= res.json;
            this.initialColors= Object.assign([], this.colors); // I've tried with res.json too
        },
            (res: ResponseWrapper) => this.onError(res.json)
        );
    }

    submitColors(form) {
        this.confirmationDialogService.confirm('Validation','Do you want to save changes ?')
        .then((confirmed) => {
            if (confirmed === true) {
                // stuff to save is OK
            } else { // want to return to initial state
                this.colors= this.initialColors;
    }
}

But the problem is that initialColors has taken the same values than colors... (when I do console.log both arrays have the same rgb updated by the form)

My form looks like this :

<form #colorForm="ngForm" (ngSubmit)="submitColors(colorForm.form.value);">
            <table>
                <tr *ngFor="let c of colors| orderBy: 'id';">
                    <td>{{c.label| translate}} :</td>
                    <td>
                        <input type="color"
                               [(ngModel)]="c.color"
                               #nameField="ngModel"
                               name="{{c.label}}"
                               (ngValue)="c.color"
                               [ngStyle]="{'color-rendering': c.color}"/>
                    </td>
                </tr>
            </table>
            <button type="submit" class="btn btn-sm">
                <span class="fa fa-save"></span>
                <span class="d-none d-md-inline" jhiTranslate="entity.action.save">Save</span>
            </button>
        </form>

Does anyone have an idea ?

Answer 1

Dont' use Object.assign([], anotherArr) and don't assign colors to initialColors. Clone it. You can use lodash library to clone array like this:

submitColors(form) {
        this.confirmationDialogService.confirm('Validation','Do you want to save changes ?')
        .then((confirmed) => {
            if (confirmed === true) {
                // stuff to save is OK
            } else { // want to return to initial state
                // 

                this.colors= _.cloneDeep(this.initialColors);
    }

Code example

In your case in two array object references are the same:

this.colors[0] == this.initialColors[0] // true

Therefore, your editing the same array of objects in form

If you can't you lodash for some reason. Deep copying array of nested objects in javascript