Angular Signal表单重置：替代form.reset()的最新实现方式

针对Angular 16+引入的Signal-based Forms，重置表单的方式和传统Reactive Forms略有区别，以下是具体实现方案：

1. 重置单个Signal FormControl #

如果你用formControl()创建了单个表单控件：

// 初始化带初始值的控件
const usernameCtrl = formControl('guest');

重置时，你可以直接调用控件的reset()方法，若要恢复到初始值，需显式传入初始值：

// 重置到指定初始值，并清除脏值、触摸等状态
usernameCtrl.reset('guest');

如果不需要指定值，直接调用reset()会将控件值设为null，同时重置状态：

usernameCtrl.reset();

2. 重置Signal FormGroup #

对于用formGroup()创建的表单组：

// 初始化表单组及初始值
const userForm = formGroup({
  username: formControl('guest'),
  email: formControl('guest@example.com')
});

重置整个表单时，同样调用reset()方法，传入你想要恢复的初始值对象：

// 重置到初始状态
userForm.reset({
  username: 'guest',
  email: 'guest@example.com'
});

如果希望更灵活地复用初始值，可以提前把初始值存在signal中：

const initialFormValues = signal({
  username: 'guest',
  email: 'guest@example.com'
});
const userForm = formGroup(initialFormValues());

// 重置时直接复用初始值
userForm.reset(initialFormValues());

3. 传统Reactive Forms结合Signal的情况 #

如果你只是用toSignal()把传统FormGroup转成signal监听值变化，底层仍然是传统表单实例，直接用原来的reset()方法即可：

const userForm = new FormGroup({
  username: new FormControl('guest'),
  email: new FormControl('guest@example.com')
});
// 转成signal监听变化
const userFormSignal = toSignal(userForm.valueChanges);

// 重置逻辑和之前一致
userForm.reset();

内容的提问来源于stack exchange，提问作者Raphaël Balet