从不同的表单组更新表单组表单控件值，但我不想永久更改这些值（角度）

Question

将鼠标悬停在表中的第一列上时，会出现一个工具提示，单击按钮会打开包含编辑 json 部分的对话框。

我提供了 2 个功能：-

[请从对话框的左侧部分选择一行]

1) 可以编辑 json（在这种情况下，用户单击左侧部分的行，开始编辑 json，并且在不恢复新更改的情况下，用户单击左侧部分下的不同行，然后再次选择先前选择的行原始 json数据被保留）

2) 用户单击左侧部分的行，并开始从输入字段提供输入（出现在“添加为”按钮上方）我开始更新“编辑 Json”部分中的“mTitle”键，因此一旦用户点击另一个行并再次返回到先前选择的行，json 'mTitle' 键不显示原始（旧）值

预期行为

我期待的是一旦用户提供输入，'mTitle' 键应该被更新（这是有效的）但是在 Add As New 按钮被点击或用户点击后，'mTitle' 键应该再次保留其旧值在另一行。（与情况 1 相同的行为）

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

请建议

警报对话框.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>

警报对话框.component.ts

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

Answer 1

我尝试在添加新按钮上实现此功能

您只需保留所选项目的副本并根据您的条件使用它即可。

这是stackblitz 链接

在第 59 行 this.customTitle= _.cloneDeep(this.data.data[this.selectedId]);，当用户从左侧面板中选择时，在自定义标题中进行复制

在第 72 行，创建了一个临时变量，它将保留 jsonData 中更改的对象。

在第 73 行，用 customTitle 中的原始数据更新了 json 数据。

在第 74 行，将临时变量（新标题）添加到 json 数据（这是已更新的行，您可以在任何需要的地方使用它）