Why I can't add years to a date using MomentJS into my Angular application?

Question

I am working on an Angular application trying to use momentJS to add a specific number of years to a date but it seems not working.

This is my code:

changeGuaranteeEndDate(guaranteeDuration) {
    console.log("changeGuaranteeEndDate() START");
    console.log("GUARANTEE START DATE: " + this.newAssetForm.value.guarantee_start_date);
    console.log("GUARANTEE DURATION: " + this.newAssetForm.value.guarantee_duration);
    console.log("EVENT VAL: " + guaranteeDuration);

    this.newAssetForm.value.guarantee_duration = guaranteeDuration;
    console.log("GUARANTEE DURATION: " + this.newAssetForm.value.guarantee_duration);

    let myMoment: moment.Moment = moment(this.newAssetForm.value.guarantee_start_date);
    console.log("myMoment: ", myMoment);

    let myMoment2 = myMoment;
    myMoment2.add(3, 'y')

    console.log("myMoment2: ", myMoment2);
}

So basivally I am creating the myMoment object starting from the date defined into this.newAssetForm.value.guarantee_start_date.

Then I am trying to create a new myMoment2 object starting from myMoment and I am adding 3 years to this object. Finnally I print it

The problem is that in the Chrome console I obtain the following output:

myMoment:  
Moment {_isAMomentObject: true, _i: Fri Jan 29 2021 13:04:29 GMT+0100 (Ora standard dell’Europa centrale), _isUTC: false, _pf: {…}, _locale: Locale, …}
_d: Mon Jan 29 2024 13:04:29 GMT+0100 (Ora standard dell’Europa centrale) {}
_i: Fri Jan 29 2021 13:04:29 GMT+0100 (Ora standard dell’Europa centrale) {}
_isAMomentObject: true
_isUTC: false
_isValid: true
_locale: Locale {_calendar: {…}, _longDateFormat: {…}, _invalidDate: "Invalid date", _dayOfMonthOrdinalParse: /\d{1,2}(th|st|nd|rd)/, ordinal: ƒ, …}
_pf: {empty: false, unusedTokens: Array(0), unusedInput: Array(0), overflow: -2, charsLeftOver: 0, …}
__proto__: Object

myMoment2:  
Moment {_isAMomentObject: true, _i: Fri Jan 29 2021 13:04:29 GMT+0100 (Ora standard dell’Europa centrale), _isUTC: false, _pf: {…}, _locale: Locale, …}
_d: Mon Jan 29 2024 13:04:29 GMT+0100 (Ora standard dell’Europa centrale) {}
_i: Fri Jan 29 2021 13:04:29 GMT+0100 (Ora standard dell’Europa centrale) {}
_isAMomentObject: true
_isUTC: false
_isValid: true
_locale: Locale {_calendar: {…}, _longDateFormat: {…}, _invalidDate: "Invalid date", _dayOfMonthOrdinalParse: /\d{1,2}(th|st|nd|rd)/, ordinal: ƒ, …}
_pf: {empty: false, unusedTokens: Array(0), unusedInput: Array(0), overflow: -2, charsLeftOver: 0, …}
__proto__: Object

The problems is that, as you can see in the previous output, it seems that the years was not added to the originalmyMoment object.

What is wrong with my code? What am I missing? How can I correctly add years to my original myMoment object?

Answer 1

It works for me.... you can test it clicking on Run code Snippet below.

You can try to use the same loaded lib of my example: src moment.min.js

function changeGuaranteeEndDate(guaranteeDuration) {
    console.log("changeGuaranteeEndDate() START");
    console.log("GUARANTEE START DATE: " + this.newAssetForm.value.guarantee_start_date);
    console.log("GUARANTEE DURATION: " + this.newAssetForm.value.guarantee_duration);
    console.log("EVENT VAL: " + guaranteeDuration);

    this.newAssetForm.value.guarantee_duration = guaranteeDuration;
    console.log("GUARANTEE DURATION: " + this.newAssetForm.value.guarantee_duration);

    let myMoment = moment(this.newAssetForm.value.guarantee_start_date);

    console.log("myMoment: ", myMoment);

    let myMoment2 = myMoment;
    myMoment2.add(3, 'y')

    console.log("myMoment2: ", myMoment2);
}

// This is just for Testing the function... and mocking object
changeGuaranteeEndDate.apply({
  newAssetForm:{
    value:{
      guarantee_start_date:new Date(),
      guarantee_duration:undefined
    }
  }
})

<script       src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>