Setting new value to another model reassign old model (Angular)

Question

I have 2 date pickers in angular HTML

here is it

<div *ngIf="receipt.chargeTypeId !== 4" class="row">
    <div class="col-6">
        <div class="form-group">
            <label class="label-title">{{ l('RentalPeriodFrom') }}</label><br />
            <utc-datepicker name="RentalPeriodFrom" [(ngModel)]="receipt.rentalPeriodFrom">
            </utc-datepicker>
        </div>
    </div>
    <div class="col-6">
        <div class="form-group">
            <label class="label-title">{{ l('RentalPeriodTo') }}</label><br />
            <utc-datepicker name="RentalPeriodTo" [(ngModel)]="receipt.rentalPeriodTo">
            </utc-datepicker>
        </div>
    </div>
</div>

I need to set RentalPeriodTo to RentalPeriodFrom + 1 month

I do it like this

this.receipt.rentalPeriodFrom = this.tenancyData.tenancyStartDate;
const periodTo = this.receipt.rentalPeriodFrom;
this.receipt.rentalPeriodTo = periodTo.add(1, 'M');

But it changes my this.receipt.rentalPeriodFrom to date relevant to this.receipt.rentalPeriodTo

Where is the problem?

Answer 1

// this might be due to the receipt.rentalPeriodFrom is copied as reference to periodTo which change source when we modify the receiptto

this.receipt.rentalPeriodFrom = this.tenancyData.tenancyStartDate;
const periodTo = Object.assign({},this.receipt.rentalPeriodFrom);
this.receipt.rentalPeriodFrom;  
this.receipt.rentalPeriodTo = periodTo.add(1, 'M');