从具有角度 ngDefaultControl 的列表中选择的值不绑定答案

【问题标题】：value not binding on choose from list with angular ngDefaultControl从具有角度 ngDefaultControl 的列表中选择的值不绑定
【发布时间】：2022-10-25 15:24:13
【问题描述】：

我有选项列表并使用 ngDefaultControl Angular 指令，但 formcontrol 值在按钮单击时显示为空。我想在不使用setValue 或patchValue 方法的情况下绑定值以形成按钮单击控件。

例子：

 <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">
  <div class="list-popup">
    <ul class="list" [formControlName]="'category'" ngDefaultControl>
      <li class="item" *ngFor="let option of listValues" [value]="option">
        <button type="button" class="item-option" tabindex="-1">
          <span class="item-label">{{ option }}</span>
        </button>
      </li>
    </ul>
  </div>
</form>

是否可以绑定 UI 中的值以控制相同的选择？您能否建议我解决方法。这是stackblitz

提前致谢。

【问题讨论】：

标签： javascript html angular

【解决方案1】：

角当你放一个formControl时不知道该怎么做在 ul 上。为了做你想做的事，你必须创建一个组件（或指令）它实现了ControlValueAccessor 并将与表单控件相关的代码移到那里。

实施控制值访问器意味着实现以下三个功能：写值,registerOnChange,registerOnTouched.通过这种方式，Angular 将知道如何处理您的组件。

比如你可以关注这个example

【讨论】：