Angular 表单中 patchValue 与 setValue 方法有什么区别？

Question

在 Angular 中， patchValue 和 setValue 都是用于更新表单控件的值的方法，但它们的行为有所不同，主要体现在以下几个方面：

1. 更新对象的范围

• setValue : 必须提供一个完整的对象，包含表单模型中所有字段的值。如果你的表单有多个控件（例如： name 、 age 、 email ），那么 setValue 要求你传递一个包含所有控件的值的对象，缺少任何字段都会抛出错误。

   this.form.setValue({
     name: 'John',
     age: 30,
     email: 'john@example.com'
   });

• patchValue : 允许你只更新部分字段的值，不需要提供完整的对象。 patchValue 会根据你提供的字段来更新相应控件，其他未提供的控件保持原值。

   this.form.patchValue({
     name: 'John',
     age: 30
   });

2. 是否需要完整数据

• setValue : 需要表单控件中的所有字段都有对应的值，否则会报错。
• patchValue : 只要提供部分字段的值，不会报错，对于未提供的字段，它们会保持原来的值。

3. 使用场景

• setValue : 适用于你确定需要更新整个表单或者整个对象的值的情况。
• patchValue : 适用于你只需要更新部分控件的值时，特别是在处理动态表单或者某些字段的更新时。

示例：

假设有一个表单模型如下：

this.form = this.fb.group({
  name: ['', Validators.required],
  age: [null, Validators.required],
  email: ['', [Validators.required, Validators.email]]
});

使用 setValue ：

this.form.setValue({
  name: 'Alice',
  age: 25,
  email: 'alice@example.com'
});

此时，你必须提供 name 、 age 和 email 的值，否则会抛出错误。

使用 patchValue ：

this.form.patchValue({
  name: 'Alice',
  email: 'alice@example.com'
});

patchValue 只会更新 name 和 email 字段，而 age 字段保持不变（如果之前有值的话）。

总结来说， setValue 要求更新完整的表单数据，而 patchValue 允许部分更新。