javascript - 从不同的表单组更新表单组表单控件值，但我不想永久更改值(Angular)

Question

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

我提供了 2 个功能:-

[请在对话框左侧选择一行]

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

2) 用户单击左侧部分的行，并开始从输入字段(位于 Add As 按钮上方)提供输入 我开始更新 Edit 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

请建议

警报-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>

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

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

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

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

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