Angular表单中无法渲染可复用下拉选择组件问题求助

1. 模板标签错误（直接导致下拉无显示的核心原因） #

你的select模板里误用了<options>标签，HTML下拉选项的正确标签是<option>（单数形式）。浏览器无法识别<options>标签，因此即便DOM中存在该元素，也不会渲染为可交互的下拉选项。

2. 未正确实现ControlValueAccessor接口 #

组件仅声明实现了ControlValueAccessor接口，但未填充核心方法逻辑，导致表单控件与组件之间无法同步值。同时需要为select绑定内部状态，并处理值变化的回调。

3. 表单初始化默认值错误 #

RegisterComponent中初始化country表单控件时，默认值设为了整个countries数组，不符合下拉控件的取值逻辑，应设置为单个选项的value（如0）或null。

修正后的代码： #

select-input.component.ts

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

@Component({
  selector: 'select-input',
  templateUrl: './select-input.component.html',
  styleUrls: ['./select-input.component.css']
})
export class SelectInputComponent implements ControlValueAccessor 
{
  @Input() label: string;
  @Input() name: string;
  @Input() options: {value: number; description: string}[];
  
  // 内部维护的选中值
  selectedValue: number | null = null;
  
  // 用于通知外部值变化的回调
  private onChange: (value: any) => void = () => {};
  // 用于通知外部控件被触碰的回调
  private onTouched: () => void = () => {};

  constructor() { }

  writeValue(obj: any): void {
    // 从外部接收值时更新内部选中状态
    this.selectedValue = obj;
  }

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

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

  // 下拉值变化时触发，同步到外部表单控件
  onValueChange(value: string): void {
    const numValue = Number(value);
    this.selectedValue = numValue;
    this.onChange(numValue);
    this.onTouched();
  }
}  

select-input.component.html

<div>
    <label for="{{name}}" style="margin-right: 2px;">{{label}}:</label>
    <select 
        name="{{name}}" 
        [value]="selectedValue"
        (change)="onValueChange($event.target.value)"
        (blur)="onTouched()"
    >
        <!-- 修正为<option>单数标签 -->
        <option *ngFor="let option of options" [value]="option.value">
            {{option.description}}
        </option>
    </select>
</div>

register.component.ts

import { OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

export class RegisterComponent implements OnInit 
{
  countries: {value: number, description: string}[] = [
    {value: 0, description: 'Canada'},
    {value: 1, description: 'USA'},
    {value: 2, description: 'England'},
    {value: 3, description: 'Japan'},
  ];
  registerForm: FormGroup;

  constructor (private fb: FormBuilder) {}

  ngOnInit(): void 
  {
    this.initializeForm();
  }
  
  initializeForm()
  {
    this.registerForm = this.fb.group({
      username: ['', Validators.required],
      // 设置单个选项的value作为默认值，这里选Canada的value=0
      country: [0, Validators.required]
    });
  }
}

register.component.html

<!-- 配合formGroup使用formControlName更简洁 -->
<form [formGroup]="registerForm">
  <select-input 
      formControlName="country"
      [label]="'Country'" 
      [name]="'countries'" 
      [options]="countries"
  >
  </select-input>
</form>

额外说明 #

• 使用formControlName需确保父组件的form标签绑定了[formGroup]="registerForm"，这样能更清晰地关联表单控件与组件。
• 完整实现ControlValueAccessor后，组件可像原生表单控件一样支持Angular表单的验证、值同步等功能。
• 修复<option>标签后，下拉选项会正常渲染并显示。

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