Angular中使用ngDefaultControl时列表选择值无法绑定到表单控件

可以实现，无需手动调用setValue或patchValue，以下是两种可行方案：

方案一：借助隐藏input控件（快速实现） #

原生表单控件（如input）与FormControl绑定后，会自动同步值的变化。我们可以用一个隐藏的input绑定目标FormControl，点击选项时直接修改该input的value，FormControl会自动感知并更新值。

修改后的模板代码：

<h3>input text search dropdown</h3>
<div class="result">
  Selected Value:
  {{ 
    rootForm.get('category')?.value
      ? rootForm.get('category')?.value
      : 'Please select value'
  }}
</div>
<br />
<form [formGroup]="rootForm">
  <!-- 隐藏input绑定FormControl -->
  <input type="hidden" formControlName="category" #hiddenInput>
  <div class="list-popup">
    <ul class="list">
      <li class="item" *ngFor="let option of listValues">
        <button type="button" class="item-option" tabindex="-1" (click)="hiddenInput.value = option">
          <span class="item-label">{{ option }}</span>
        </button>
      </li>
    </ul>
  </div>
</form>

点击按钮时，直接给隐藏input赋值，FormControl会自动同步这个值，完全不需要手动调用表单控件的设置方法。

方案二：自定义ControlValueAccessor（优雅复用方案） #

如果这类自定义下拉列表需要在多个地方复用，推荐实现ControlValueAccessor接口，让你的列表成为一个可直接与FormControl绑定的自定义控件。

自定义控件代码： #

import { Component, forwardRef, Input } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'custom-option-list',
  template: `
    <ul class="list">
      <li class="item" *ngFor="let option of options">
        <button type="button" class="item-option" tabindex="-1" (click)="onOptionSelect(option)">
          <span class="item-label">{{ option }}</span>
        </button>
      </li>
    </ul>
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomOptionListComponent),
      multi: true
    }
  ]
})
export class CustomOptionListComponent implements ControlValueAccessor {
  @Input() options: string[] = [];
  private onChange: (value: any) => void = () => {};
  private onTouched: () => void = () => {};

  onOptionSelect(option: string) {
    this.onChange(option);
    this.onTouched();
  }

  writeValue(value: any): void {
    // 可在这里处理控件初始值的渲染逻辑
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  setDisabledState?(isDisabled: boolean): void {
    // 可在这里添加控件禁用状态的处理逻辑
  }
}

父组件中使用： #

<form [formGroup]="rootForm">
  <custom-option-list formControlName="category" [options]="listValues"></custom-option-list>
</form>

点击选项时，控件内部通过调用onChange方法自动将值同步到FormControl，完全符合Angular表单的绑定规范，无需手动操作表单控件。

原代码问题说明 #

你原本的代码中，<ul>并非原生表单控件，即使添加了ngDefaultControl，它也没有内置的值变更触发机制。点击按钮不会修改<ul>的value属性，因此FormControl无法感知到值的变化，导致控件值为空。

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