使用ng-select时如何实现选中值后的可编辑修改功能

要实现「从下拉列表选中固定预设值后，仍可直接编辑输入自定义内容」的效果，仅需在现有ng-select组件基础上补充核心配置，无需重构原有代码结构。

核心配置说明 #

• [searchable]="true"：将输入框设置为可交互状态，避免选中预设值后输入框被锁定为只读展示
• [editableSearchTerm]="true"：解除选中值对输入框内容的锁定，允许用户选中预设值后直接激活输入框修改内容
• [addTag]="true"：允许将用户输入的、不在预设选项列表内的自定义内容，作为合法选中值存入对应表单控件
• [addTagOnBlur]="true"：用户输入完自定义内容后失焦时，自动将输入内容标记为选中值，无需额外按回车或点击确认选项
• addTagText：可配置自定义值的提示文案，引导用户使用自定义输入能力，降低使用门槛

调整后的完整代码 #

<div class="col-sm-3">
       <label>{{'Pickup Time' | translate}}</label>
          <ng-select 
            placeholder="Any Time" 
            [virtualScroll]="true" 
            formControlName="pickUpTime"
            [searchable]="true"
            [editableSearchTerm]="true"
            [addTag]="true"
            [addTagOnBlur]="true"
            addTagText="使用输入值: {{term}}"
          >
              <ng-option value="">Any Time</ng-option>
              <ng-option value="00:59">00:00</ng-option>
              <ng-option value="01:00">01:00</ng-option>
              <ng-option value="02:00">02:00</ng-option>
              <ng-option value="03:00">03:00</ng-option>
              <ng-option value="04:00">04:00</ng-option>
              <ng-option value="05:00">05:00</ng-option>
              <ng-option value="06:00">06:00</ng-option>
           </ng-select>
     </div>

效果验证 #

• 从下拉列表选中如02:00的预设选项后，直接点击输入框即可激活编辑状态，按下退格键删除原有内容，手动输入如02:30的自定义值
• 输入完成后点击页面任意非下拉区域，自定义内容会自动绑定到pickUpTime表单控件，不会被清空或替换为预设值
• 可根据业务需要在addTag的回调中增加输入格式校验，拦截不符合时间格式的非法输入

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