ng-select点击外部输入内容被清空，如何保留输入值？

针对你使用的ng-select组件，输入内容后直接点击页面外部导致内容清空的问题，可通过以下方案解决：

方案：监听blur事件手动触发标签添加 #

ng-select默认仅在按下Tab/Enter键时执行addTag逻辑，我们可以在组件失去焦点时，主动获取输入内容并调用添加标签的方法，从而保留输入内容。

步骤1：模板绑定blur事件 #

修改ng-select模板，添加(blur)事件绑定到自定义处理函数：

<ng-select
            style="width: 100%; margin-left: -5px"
            [(ngModel)]="List"
            [clearable]="false"
            autofocus
            formControlName="Email"
            (keyup)="BlurMethod($event)"
            (blur)="handleNgSelectBlur(ngSelect)"
            #ngSelect
            (remove)="removeToItem($event)"
            [items]="to$ | async"
            bindLabel="e_mail1_Value"
            bindValue="e_mail1_Value"
            [addTag]="addTagPromise"
            [multiple]="true"
            [hideSelected]="true"
            [trackByFn]="trackByFn"
            [minTermLength]="2"
            [loading]="peopleLoading"
            typeToSearchText="Please enter"
            [typeahead]="toInput$"
            placeholder="Users"
            id="toMailId"
            [selectOnTab]="true"
          >
          </ng-select>

步骤2：实现blur处理函数 #

在组件类中添加处理方法，获取输入框内容并调用已有addTagPromise完成标签添加：

handleNgSelectBlur(ngSelect: any) {
  const inputTerm = ngSelect.filterInput.nativeElement.value.trim();
  
  // 校验内容长度符合minTermLength要求
  if (inputTerm && inputTerm.length >= 2) {
    this.addTagPromise(inputTerm).then(tag => {
      if (tag) {
        // 更新ngModel数据
        this.List = [...this.List, tag];
        // 同步更新表单控件值（如果使用formControlName）
        this.Email.setValue([...this.Email.value, tag]);
      }
    });
    // 清空输入框
    ngSelect.filterInput.nativeElement.value = '';
  }
}

补充说明 #

• 确保addTagPromise能正确返回包含e_mail1_Value字段的对象，示例如下：

addTagPromise(term: string): Promise<any> {
  // 可在此添加重复校验、格式校验等逻辑
  return Promise.resolve({ e_mail1_Value: term });
}

• 建议移除[(ngModel)]和formControlName的重复绑定，仅保留其中一个，避免表单状态不一致。

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