Angular响应式表单中ng-select设值后禁用值丢失问题求助

我之前也碰到过一模一样的问题！当先给FormControl设值再调用form.disable()时，ng-select的选中值就莫名其妙不见了——其实模型里的值是存在的，就是视图没同步上，挺闹心的。

问题原因 #

主要是因为调用form.disable()会触发整个表单的状态变更事件，ng-select在响应这个事件时，可能没有正确读取已经设置好的控件值，导致视图渲染时丢失了选中状态。

可行的解决方案 #

这里有几个亲测有效的方法：

1. 单独禁用目标控件而非整个表单

如果不需要禁用整个表单，只针对code控件操作的话，可以直接单独禁用它：

this.form.controls['code'].setValue('0');
this.form.controls['code'].disable(); // 仅禁用code控件，不影响其他字段

2. 调用form.disable()时传入emitEvent: false参数

禁用整个表单时，阻止触发变更事件，避免ng-select重新渲染时丢失已设置的值：

this.form.controls['code'].setValue('0');
this.form.disable({ emitEvent: false }); // 禁用时不触发状态变更事件

3. 绑定ng-select的[disabled]属性

在模板里直接把ng-select的禁用状态和表单状态绑定，这样先设值再修改表单禁用状态时，ng-select能正确同步选中值：

<ng-select 
  formControlName="code" 
  [items]="values" 
  bindValue="value" 
  labelForId="code" 
  [clearable]="false" 
  [selectOnTab]="true" 
  placeholder="Select one" 
  data-e2e-id="code"
  [disabled]="form.disabled"
></ng-select>

对应的逻辑代码：

this.form.controls['code'].setValue('0');
this.form.markAsDisabled(); // 或者用this.form.disable({ emitEvent: false })

你可以试试这几个方法，我当时用第二种就顺利解决了问题，希望对你有帮助！

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