Angular Reactive Form 表单 setValue 与 patchValue 差异

今天就来说说 setValue 与 patchValue 差异这部份吧

一开始不太能理解这 setValue 与 patchValue 到底差在哪里(官网的说明让我不是很懂,理解力太差了 XD),不是一样都是赋值给 form 吗

这几天在使用的过程中,踩了一些雷後才懂,一个下午就这样不见了,但!是值得的,只是我又要加班了 XDDDD

踩雷过程

这是表单里的格式与所要塞入表单里的资料

data = {
  name: "Mandy",
  phone: "0912345678",
  favoritesOptions: [
    { id: 1, favorite: "book" },
    { id: 2, favorite: "sleep" },
    { id: 3, favorite: "shopping" },
  ],
};

export class FormComponent implements OnInit {
  form: FormGroup = new FormGroup({
    name: new FormControl(),
    phone: new FormControl(),
    favorites: new FormArray([]),
  });
}

一开始要赋予初始值,我是这样写的
.ts

 ngOnInit(): void {
    this.form.setValue({
      name: this.data.name,
      phone: this.data.phone,
    });

    this.data.favoritesOptions.forEach((e) => {
      this.favorites.push(
        new FormGroup({
          id: new FormControl(e.id),
          favorite: new FormControl(e.favorite),
        })
      );
    });
 }

当时我以为对 form 表单已经很熟了,结果 想不到啊想不到,就喷了这个错

试着将 forEach 这串拿掉後,错误依然在
接着我将 code 改为

this.form.setValue({
  name: this.data.name,
  phone: this.data.phone,
  favorites: [],
});

错误才消失,但这不是我的要结果啊啊啊,阵列里的值没有出来。
後来我试着将 code 里面的 setValue 改 patchValue

this.form.patchValue({
  name: this.data.name,
  phone: this.data.phone,
});

疑!错误消失了!!
接着再将之前拿掉的 forEach 补回去
哇!!!是我要的结果

接着再回官网里看说明,更新部分资料模型


setValue

官网说明:
使用 setValue() 方法来为单个控制元件设定新值。
setValue() 方法会严格遵循表单组的结构,并整体性替换控制元件的值。

意思就是,表单里的结构有哪些资料,必须 1:1 的放上去,缺一不可。

若想使用 setValue 单独修改表单里其中一个值的部份,可以这样做

this.form.get("name")?.setValue(this.data.name);

patchValue

官网说明:
使用 patchValue() 方法可以用物件中所定义的任何属性为表单模型进行替换。

意思就是,我可以随心所欲,想更新哪个值就更新哪个值
後来估狗翻译了一下 patch 为修补的意思 (我为我的英文能力哀悼)
所以 patchValue 定义为我要修改里面的值,不受表单的结构限制


到这里才算完整了解这两者的差异性 XD

参考资料:
更新部分资料模型


<<:  透过数位逻辑电路学习 Bitwise 操作

>>:  透过 RISC-V 模拟器搞懂指令管线化

选择具有 GPU 的 EC2 并完成配置-Day 02

选择具有 GPU 的 EC2 并完成配置-Day 02 需要配置一台电脑来处理接下来所有的服务,因为...

Day19 Vue基本教学(一)

Vue.js介绍 是一个用於建立使用者介面的开源JavaScript框架,也是一个建立单页应用的We...

【27】遇到不平衡资料(Imbalanced Data) 时 使用 Undersampling 解决实验

Colab连结 不平衡资料集(Imbalanced Dataset) 指的是当你的资料集中,有某部分...

(Day 19) 原型与建构式

函式建构式建立原型 前面几篇有提到,可以使用函示建构式、或是 ES 6 来建立原型,今天就来介绍使用...

还在烦恼CSS flex怎麽调整吗?也许你该试试Chrome 90 的新功能 — flexbox Editor

新手在学习CSS flex时,首要观念就是要厘清什麽是main axis与cross axis之外,...