To update a formgroup formcontrol value from different formgroup but I do not to want to change the values permanently(Angular)

Question

On hovering over the first column in table , a tooltip appears , on click of the button dialog box opens up which has edit json section

I have provided 2 functionalities :-

[Please select a row from left section in dialog box]

1) The json can be edited (In this scenario user clicks on row from left section, starts editing the json and without reverting the new changes the user clicks on a different row under left section and again selects back the previously selected row the original json data is preserved)

2) User clicks on row from left section , and starts giving input from the input field (present just above the Add As button) I start updating the 'mTitle' key in the Edit Json section , so here as well once the user clicks on a different row and again comes back to the previously selected row the json 'mTitle' key does not show the original(old) value

Expected behaviour

What I was expecting is once the user gives the input , the 'mTitle' key should be updated(which is working) but the the 'mTitle' key should again retain its old value after the Add As New button is clicked or the user clicks on some other row.(same behaviour as in case 1)

Stackblitz link https://stackblitz.com/edit/angular-mat-tooltip-v6m2tz?file=app%2Falert-dialog%2Falert-dialog.component.ts

Please suggest

alert-dialog.component.html

<form [formGroup]="jsonform">
            <json-input formControlName="json" name="result"></json-input>
</form>

 <form [formGroup]="submitJsonNameAndForm" class="">
    <mat-form-field [floatLabel]="'never'" class="alertinput">
        <input matInput trim type="text" #alertnamefieldRef formControlName="alertnamefield" placeholder="Custom Alert Name"
            autocomplete="off" (keyup) = "passingAlerTitle(alertnamefieldRef?.value)">
    </mat-form-field>
</form>

alert-dialog.component.ts

passingAlerTitle(event){
    this.data.data[this.selectedId].conditionals.alert.mTitle = event;
    this.jsonform.setValue({
      json: this.data.data[this.selectedId].conditionals
     });  
}

Gourav Garg · Accepted Answer · 2020-04-06T07:17:04.320

1

I tried to implement this on add new button

You just need to keep a copy of selected item and use it on your conditions.

Here is the stackblitz link

At line 59 this.customTitle= _.cloneDeep(this.data.data[this.selectedId]);, when user select from left panel, made a copy in custom title

At line 72, created a temp variable which will keep changed object from jsonData.

At line 73, updated json data with original data which was in customTitle.

At line 74, added temp variable(new Title) to json data (this is row which has been updated, you can use this where ever you want)

edited Apr 06 '20 at 07:17

answered Apr 06 '20 at 06:18

Gourav Garg

2,856
11
24

other function will create shallow copy. You can use const cloneFood = JSON.parse(JSON.stringify(food)) if your value is not circular. you can see here https://www.samanthaming.com/tidbits/70-3-ways-to-clone-objects/ – Gourav Garg Apr 06 '20 at 06:55
You were saying one more thing :) , if value is not circular , just out of curiosity wanted to understand. – Enthu Apr 06 '20 at 07:00
See this https://stackoverflow.com/questions/1493453/example-of-a-circular-reference-in-javascript basically, an object is referencing itself after 0 or more layer – Gourav Garg Apr 06 '20 at 07:07
added in answer – Gourav Garg Apr 06 '20 at 07:17
Thanks :) , I have accepted the answer , SO will allow me to honor the bounty in 9 hrs will do it, thanks again – Enthu Apr 06 '20 at 08:33
commented there. – Gourav Garg Apr 07 '20 at 09:34

To update a formgroup formcontrol value from different formgroup but I do not to want to change the values permanently(Angular)

1 Answers1