Angular 驗證器和雙向綁定問題

Question

我的源代碼可以通過以下鏈接訪問：

https://stackblitz.com/edit/angular-umszww

我已經為部門和系統字段設置了雙向綁定。 我單擊“添加新調用樹”，一個模態彈出窗口，然后例如，我從除法下拉框中選擇“A1”。 之后，我在“系統”字段中輸入“ABC”，最后單擊“保存”按鈕。

我希望控制台應該顯示以下內容：

CallTree {division: "A1", systemName: "ABC"}

但是，控制台實際上應該顯示以下內容：

CallTree {division: "A1", systemName: ""}

我試過在下拉框中選擇其他值，除法值相應改變，但是systemName值沒有相應改變，你能告訴我為什么嗎？

Answer 1

您的表單的值將在this.myForm.value而不是在this.callTree

您的保存功能應如下所示：

save() {
  if (this.myForm.valid) {
    console.log(this.myForm.value);
  } else {
    this.validateAllFormFields(this.myForm);
  }
}

這是您的參考的工作示例代碼。

Answer 2

如果你想獲得this.callTree對象的價值this.callTree不是

你只需要替換你的保存功能

save() {
     if (this.myForm.valid) {
      Object.assign(this.callTree,this.myForm.value);
      console.log(this.callTree);
    } else {
        this.validateAllFormFields(this.myForm);
    }
  }

希望這對你有用。

如果您想了解更多，請告訴我。

謝謝