Angular响应式表单自定义Select组件：如何传递子组件变更至父组件？

一、完善自定义Select组件的ControlValueAccessor实现 #

你当前的SelectInputComponent虽实现了ControlValueAccessor接口，但核心方法为空，这是无法传递值变更的关键。需补充以下实现：

修改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: string}[];
  
  selectedValue: string;

  // 保存FormControl传递的变更回调
  private onChange: (value: any) => void = () => {};
  // 保存FormControl传递的触摸回调
  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;
  }

  // 处理select变更，通知父表单
  onSelectChange(event: Event): void {
    const target = event.target as HTMLSelectElement;
    this.selectedValue = target.value;
    this.onChange(this.selectedValue);
    this.onTouched();
  }
}  

修改select-input.component.html #

给select绑定值与变更事件，确保状态同步：

<div>
    <label for="{{name}}" style="margin-right: 2px;">{{label}}:</label>
    <select 
        name="{{name}}"
        [value]="selectedValue"
        (change)="onSelectChange($event)"
        (blur)="onTouched()"
    >
        <option value="">请选择</option>
        <option *ngFor="let option of options" [value]="option.value">
            {{option.value}}
        </option>
    </select>
</div>

二、修正父组件表单初始化错误 #

你的register.component.ts中，country控件初始值设为整个数组，这是错误的，需改为空或默认选项值：

修改register.component.ts #

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

export class RegisterComponent implements OnInit 
{
  countries: {value: string}[] = [
    {value: 'Canada'},
    {value: 'USA'},
    {value: 'UK'},
    {value: 'Japan'},
  ]
  registerForm: FormGroup;

  constructor (private fb: FormBuilder) {}

  ngOnInit(): void 
  {
    this.initializeForm();
  }
  
  initializeForm()
  {
    this.registerForm = this.fb.group({
      username: ['', Validators.required],
      // 初始值设为空，或指定默认值如'Canada'
      country: ['']
    })
  }

  // 可选：测试表单值变化
  logFormValue(): void {
    console.log(this.registerForm.value);
  }
}

修改register.component.html #

使用formControlName替代直接绑定[formControl]，更符合规范：

<form [formGroup]="registerForm">
  <select-input 
    formControlName="country"
    [label]="'Country'" 
    [name]="'countries'" 
    [options]="countries"
  >
  </select-input>

  <input formControlName="username" placeholder="Username">

  <button type="button" (click)="logFormValue()">查看表单值</button>
</form>

关键说明 #

• ControlValueAccessor是Angular表单与自定义组件通信的核心接口，必须正确实现三个方法以完成值的双向同步。
• 自定义组件需维护内部选中状态，在值变更时调用onChange通知父表单，在组件失去焦点时调用onTouched标记控件为已触摸。

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