Angular多页面表单中Kendo MultiSelect切换页面后选中值丢失解决方法

以下是针对该问题的具体解决步骤：

1. 确保表单状态全局持久化 #

不要在页面组件内部每次初始化时创建新的FormGroup，而是将表单实例放在父组件或共享服务中，让所有页面组件共享同一个表单状态，避免页面切换时组件销毁导致状态丢失。

示例代码：

// 共享表单服务
import { Injectable } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Injectable({ providedIn: 'root' })
export class MultiPageFormService {
  public formGroup: FormGroup = new FormGroup({
    selectedOptions: new FormControl([]) // 存储MultiSelect选中值
  });
}

// 第一页组件
import { Component } from '@angular/core';
import { MultiPageFormService } from './multi-page-form.service';

@Component({
  selector: 'app-step-1',
  template: `
    <kendo-multiselect
      [formControl]="formService.formGroup.get('selectedOptions')"
      [data]="optionList"
      textField="label"
      valueField="value"
      placeholder="选择选项"
    ></kendo-multiselect>
  `
})
export class Step1Component {
  optionList = [
    { label: '选项A', value: 'a' },
    { label: '选项B', value: 'b' },
    { label: '选项C', value: 'c' }
  ];

  constructor(public formService: MultiPageFormService) {}
}

2. 处理组件销毁重建的情况 #

如果页面切换时组件会被销毁（比如用*ngIf控制显示/隐藏，或路由切换未启用复用），需要在组件销毁前保存选中值，初始化时从服务恢复：

// 第一页组件补充生命周期钩子
export class Step1Component {
  // ... 其他代码

  ngOnInit(): void {
    // 初始化时从服务恢复之前的选中值
    const savedValues = this.formService.savedSelectedOptions;
    if (savedValues) {
      this.formService.formGroup.get('selectedOptions')?.setValue(savedValues);
    }
  }

  ngOnDestroy(): void {
    // 组件销毁前保存当前选中值
    this.formService.savedSelectedOptions = this.formService.formGroup.get('selectedOptions')?.value;
  }
}

// 共享服务补充存储属性
export class MultiPageFormService {
  public formGroup: FormGroup = new FormGroup({ /* ... */ });
  public savedSelectedOptions: any[] | null = null;
}

3. 检查表单绑定的正确性 #

确保Kendo MultiSelect与FormGroup的绑定没有冲突：

• 不要同时使用[(ngModel)]和formControl/formControlName，避免双向绑定干扰表单状态
• 确认formControlName正确关联到FormGroup中的对应控件

正确绑定示例：

<form [formGroup]="formService.formGroup">
  <kendo-multiselect
    formControlName="selectedOptions"
    [data]="optionList"
    textField="label"
    valueField="value"
  ></kendo-multiselect>
</form>

4. 排查意外重置逻辑 #

检查页面切换相关的代码（如路由守卫、切换按钮的点击事件），确认是否存在调用formGroup.reset()或FormControl.setValue([])的逻辑，这类代码会主动清空选中值。

内容的提问来源于stack exchange，提问作者ILLAPU RAKESH