0

我正在尝试制作这样的表格；

<form #testForm="ngForm" (ngSubmit)="onSubmit(testForm)" novalidate>
    <!-- X-Value -->
    <div ngModelGroup="xValue" class="blocks">
      <h3>XValue</h3>
      <mat-radio-group name="value1" [(ngModel)]="data.xValue.value">
        <mat-radio-button value="xValue1" class="child">xValue1</mat-radio-button>
        <mat-radio-button value="xValue2" class="child">xValue2</mat-radio-button>
      </mat-radio-group>
      <textarea #text1 name="note1"[(ngModel)]="data.xValue.note"></textarea>
    </div>
    <!-- Y-Value -->
    <div ngModelGroup="yValue" class="blocks">
      <h3>YValue</h3>
      <mat-radio-group name="value2" [(ngModel)]="data.yValue.value">
        <mat-radio-button value="yValue1" class="child">yValue1</mat-radio-button>
        <mat-radio-button value="yValue2" class="child">yValue2</mat-radio-button>
      </mat-radio-group>
      <textarea #text2 name="note2" [(ngModel)]="data.yValue.note"></textarea>
    </div>
</form>

此表单的值与我的 ts 文件中的模型相关联，我像这样初始化该模型；

data= {
    xValue: {
      value: "xValue1",
      note: ""
    },
    yValue: {
      value: "yValue1",
      note: ""
    },
}
defaultObj= JSON.parse(JSON.stringify(this.data));

最初我必须检查一个 api 以查看以前是否存储过表单，如果是，那么我必须显示以前存储的表单。为此，我将收到的对象复制到 this.data 中，并且表单会加载正确的值。如果没有值，那么我必须显示默认值，这就是我将数据存储到 defaultObj 的原因。

apiCall(){
  this.data= JSON.parse(JSON.stringify(this.existingFormValuesFromApi));
}

如果有保存的值，这会在页面加载时向我显示正确的数据。问题是当用户取消编辑时，表单应重置为现有的FormValuesFromApi。

我试图这样做；

//TS file
this.testForm.setValue(this.existingFormValuesFromApi)

但这也会在浏览器中引发错误，提示我必须为 value1 提供一个值。这是如何运作的？如何正确加载初始值？为什么我的数据对象的更改也会反映到我现有的FormValuesFromApi 对象？

编辑：如果不使用任何方法、assign()、create() 或使用扩展运算符，则无法复制嵌套对象；因为我在我的数据对象中只使用了嵌套对象，所以对数据所做的更改也会反映在我的所有嵌套对象中。如此处所见。

4

0 回答 0