Angular 2：如何在选择器式组件中用ngModel获取控件值？

嘿，作为Angular 2新手碰到表单拆分的问题太正常了！我来一步步给你拆解怎么把表单控件拆成独立组件，同时用ngModel搞定值的绑定～

一、核心思路 #

把每个表单控件（文本框、复选框、下拉框）做成独立可复用组件，通过双向数据绑定和主组件通信，这样主组件就能轻松获取所有控件的值。Angular里实现双向绑定有两种常用方式，我先从简单的开始讲，再进阶到官方推荐的标准方案。

二、方式1：@Input + @Output 快速实现双向绑定 #

这种方式适合新手快速上手，原理是用@Input接收主组件的初始值，@Output触发值变化的事件，Angular的[(xxx)]语法糖会自动把两者结合成双向绑定。

示例：文本框组件 #

先创建一个独立的文本框组件：

// text-input.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-text-input', // 主组件用这个选择器引入
  template: `
    <div class="form-group">
      <label>{{ label }}</label>
      <input 
        type="text" 
        class="form-control"
        [value]="value" 
        (input)="onInputChange($event.target.value)"
        (blur)="onTouched()">
    </div>
  `
})
export class TextInputComponent {
  @Input() label: string; // 接收标签文本
  @Input() value: string; // 接收主组件的初始值
  @Output() valueChange = new EventEmitter<string>(); // 触发值变化事件

  onInputChange(newValue: string) {
    this.valueChange.emit(newValue); // 把新值同步给主组件
  }

  onTouched() {
    // 可选：处理触摸事件（比如表单验证场景）
  }
}

然后在主组件里引入并双向绑定：

<!-- app.component.html -->
<form (ngSubmit)="onSubmit()">
  <app-text-input 
    label="用户名" 
    [(value)]="userName">
  </app-text-input>

  <!-- 其他拆分的组件也按这个方式添加 -->
  <button type="submit">提交表单</button>
</form>

主组件TS里定义绑定变量：

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  userName = ''; // 和文本框双向绑定的变量

  onSubmit() {
    console.log('用户名:', this.userName); // 直接拿到控件的值！
  }
}

三、方式2：实现ControlValueAccessor（官方标准表单控件方案） #

如果你的组件需要和Angular表单体系（比如模板驱动表单的ngModel、响应式表单的formControl）深度集成，支持表单验证、状态同步（脏值、触摸状态）等功能，那一定要实现ControlValueAccessor接口——这是Angular官方推荐的自定义表单控件方式。

示例：复选框组件 #

创建独立的复选框组件：

// checkbox-input.component.ts
import { Component, forwardRef, Input } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'app-checkbox-input',
  template: `
    <div class="form-check">
      <label class="form-check-label">
        <input 
          type="checkbox" 
          class="form-check-input"
          [checked]="checked" 
          (change)="onChange($event.target.checked)"
          (blur)="onTouched()">
        {{ label }}
      </label>
    </div>
  `,
  // 注册为表单值访问器，让Angular识别这个组件是合法的表单控件
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CheckboxInputComponent),
      multi: true
    }
  ]
})
export class CheckboxInputComponent implements ControlValueAccessor {
  @Input() label: string;
  checked = false;

  // 内部回调函数，用来通知Angular值发生变化
  private onChangeCallback: (value: boolean) => void = () => {};
  private onTouchedCallback: () => void = () => {};

  // 实现ControlValueAccessor方法：接收主组件传入的值
  writeValue(value: boolean): void {
    this.checked = value ?? false;
  }

  // 实现ControlValueAccessor方法：注册值变化的回调
  registerOnChange(fn: any): void {
    this.onChangeCallback = fn;
  }

  // 实现ControlValueAccessor方法：注册触摸事件的回调
  registerOnTouched(fn: any): void {
    this.onTouchedCallback = fn;
  }

  // 自定义方法：处理复选框状态变化
  onChange(value: boolean) {
    this.checked = value;
    this.onChangeCallback(value); // 通知Angular值已更新
    this.onTouchedCallback(); // 标记控件已被触摸
  }

  onTouched() {
    this.onTouchedCallback();
  }
}

主组件里直接用ngModel绑定：

<!-- app.component.html -->
<form (ngSubmit)="onSubmit()">
  <app-checkbox-input 
    label="同意服务条款" 
    [(ngModel)]="agreeTerms">
  </app-checkbox-input>

  <button type="submit">提交表单</button>
</form>

主组件TS里定义变量：

// app.component.ts
export class AppComponent {
  agreeTerms = false; // 和复选框双向绑定的变量

  onSubmit() {
    console.log('是否同意条款:', this.agreeTerms);
  }
}

示例：下拉框组件（同样基于ControlValueAccessor） #

// select-input.component.ts
import { Component, forwardRef, Input } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'app-select-input',
  template: `
    <div class="form-group">
      <label>{{ label }}</label>
      <select 
        class="form-control"
        [value]="selectedValue" 
        (change)="onChange($event.target.value)"
        (blur)="onTouched()">
        <option *ngFor="let option of options" [value]="option.value">
          {{ option.label }}
        </option>
      </select>
    </div>
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => SelectInputComponent),
      multi: true
    }
  ]
})
export class SelectInputComponent implements ControlValueAccessor {
  @Input() label: string;
  @Input() options: { label: string; value: string }[] = [];
  selectedValue: string;

  private onChangeCallback: (value: string) => void = () => {};
  private onTouchedCallback: () => void = () => {};

  writeValue(value: string): void {
    this.selectedValue = value;
  }

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

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

  onChange(value: string) {
    this.selectedValue = value;
    this.onChangeCallback(value);
    this.onTouchedCallback();
  }

  onTouched() {
    this.onTouchedCallback();
  }
}

主组件使用：

<!-- app.component.html -->
<app-select-input 
  label="选择城市" 
  [(ngModel)]="selectedCity"
  [options]="cityOptions">
</app-select-input>

主组件TS：

export class AppComponent {
  selectedCity = 'shanghai';
  cityOptions = [
    { label: '北京', value: 'beijing' },
    { label: '上海', value: 'shanghai' },
    { label: '广州', value: 'guangzhou' }
  ];

  onSubmit() {
    console.log('选中城市:', this.selectedCity);
  }
}

四、总结 #

• 简单场景用**@Input+@Output**就能快速实现组件拆分和双向绑定，上手成本低；
• 要做通用型表单控件、需要和Angular表单体系深度集成时，一定要用ControlValueAccessor，它支持表单验证、状态同步等高级功能；
• 不管用哪种方式，主组件都能通过绑定的变量直接获取每个控件的值，提交表单时直接使用这些变量即可。

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