CODEWITHSUNDEEP
javascriptangularangular-reactive-formsangular-forms
Enthu
Enthu

Reputation: 532

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

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
     });  
}

Upvotes: 6

Views: 2450

Answers (1)

Gourav Garg
Gourav Garg

Reputation: 2911

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)

Upvotes: 1

Related Questions