資料模型

說明

1. 通常代表從伺服器回傳的資料模型物件
2. 可以將資料模型複製到表單模型中
3. 在表單上進行的資料異動，只會改到表單模型，不會動到資料模型
4. 表單模型與資料模型之間的關係不需要1對1對應
5. 方法有兩種
   • this.form.setValue(資料模型物件)
   • this.form.patchValue(資料模型物件)

setValue()

1. 會複寫完整物件
2. 傳入setValue()的物件，結構必須與FormGroup物件結構完全相同

patchValue()

1. 將資料模型部分更新到表單模型中(僅更新部分屬性)
2. 傳入patchValue()的物件，如果比對不到FormGroup物件的屬性，會自動忽略，不會出現錯誤

程式碼範例：

1.在model-driven-form.component.ts中寫setValue()方法和patchValue()方法，將資料模型物件複製到表單模型物件

setValue(){
  var data = {
    title: "資料模型1的title",
    name: "資料模型1的name"
  }
  this.form.setValue(data);
}

patchValue(){
  var data = {
    title: "資料模型2的title",
  }
  this.form.patchValue(data);
}

2.在model-driven-form.component.html中，加入觸發前述兩個方法的按鈕

<button (click)="setValue()">setValue()</button>
<button (click)="patchValue()">patchValue()</button>

3.點擊兩個按鈕，測試將資料模型物件複製到表單模型物件