今天就来说说 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() 方法会严格遵循表单组的结构,并整体性替换控制元件的值。
意思就是,表单里的结构有哪些资料,必须 1:1
的放上去,缺一不可。
若想使用 setValue
单独修改表单里其中一个值的部份,可以这样做
this.form.get("name")?.setValue(this.data.name);
官网说明:
使用 patchValue() 方法可以用物件中所定义的任何属性为表单模型进行替换。
意思就是,我可以随心所欲,想更新哪个值就更新哪个值
後来估狗翻译了一下 patch 为修补的意思 (我为我的英文能力哀悼)
所以 patchValue 定义为我要修改里面的值,不受表单的结构限制
到这里才算完整了解这两者的差异性 XD
参考资料:
更新部分资料模型
选择具有 GPU 的 EC2 并完成配置-Day 02 需要配置一台电脑来处理接下来所有的服务,因为...
Vue.js介绍 是一个用於建立使用者介面的开源JavaScript框架,也是一个建立单页应用的We...
Colab连结 不平衡资料集(Imbalanced Dataset) 指的是当你的资料集中,有某部分...
函式建构式建立原型 前面几篇有提到,可以使用函示建构式、或是 ES 6 来建立原型,今天就来介绍使用...
新手在学习CSS flex时,首要观念就是要厘清什麽是main axis与cross axis之外,...