如何在Angular中创建可复用输入字段？提交返回undefined求助

你的核心问题是自定义输入组件与Angular表单系统的集成方式错误：当前你在子组件中创建独立的FormControl，再通过事件传递给父组件替换FormGroup内的控件，这种做法不仅违背Angular表单的设计逻辑，还会因初始化时机不匹配（比如初始状态未传递控件），导致表单控件关联失效，最终提交时无法获取值。

正确的做法是让自定义输入组件实现Angular的ControlValueAccessor接口，使其能像原生表单控件一样，直接通过formControlName或formControl与父组件的FormGroup无缝集成。

1. 重构InputComponent实现ControlValueAccessor #

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

@Component({
  selector: 'app-input',
  template: `
    <input
        [placeholder]="placeholder"
        [formControl]="internalControl"
        class="
          w-full
          p-4
          text-lg
          bg-black
          border-2
          border-neutral-800
          rounded-md
          outline-none
          text-white
          focus:border-sky-500
          focus:border-2
          transition
          disabled:bg-neutral-900
          disabled:opacity-70
          disabled:cursor-not-allowed
        "
        [type]="type"
    >
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => InputComponent),
      multi: true
    }
  ]
})
export class InputComponent implements OnInit, ControlValueAccessor {
  @Input() placeholder: string = '';
  @Input() type: string = 'text';
  @Input() required: boolean = false;
  @Input() email: boolean = false;

  internalControl!: FormControl;
  private onChange: (value: any) => void = () => {};
  private onTouched: () => void = () => {};

  ngOnInit(): void {
    this.initializeFormControl();
    this.subscribeToValueChanges();
  }

  initializeFormControl(): void {
    const validators = [];
    if (this.required) {
      validators.push(Validators.required);
    }
    if (this.email) {
      validators.push(Validators.email);
    }
    this.internalControl = new FormControl('', validators);
  }

  subscribeToValueChanges(): void {
    this.internalControl.valueChanges.subscribe(value => {
      this.onChange(value);
      this.onTouched();
    });
  }

  // ControlValueAccessor 接口实现
  writeValue(value: any): void {
    this.internalControl.setValue(value, { emitEvent: false });
  }

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

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

  setDisabledState(isDisabled: boolean): void {
    isDisabled ? this.internalControl.disable() : this.internalControl.enable();
  }
}

2. 修改LoginModalComponent的模板与代码 #

移除多余的事件绑定和控件替换逻辑，直接用formControlName关联表单：

模板部分 #

<Modal [isOpen]="true" title="Login" actionLabel="Sign in" [onSubmit]="handleSubmit">
  <form [formGroup]="loginForm">
    <div class="flex flex-col gap-4">
      <app-input placeholder="Email" type="email" formControlName="email" required email />
      <app-input placeholder="Password" type="password" formControlName="password" required />
    </div>
  </form>
</Modal>

组件类部分 #

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

@Component({
  selector: 'app-login-modal',
  templateUrl: './login-modal.component.html'
})
export class LoginModalComponent implements OnInit {
  loginForm!: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
    this.loginForm = this.fb.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', Validators.required]
    });
  }

  handleSubmit(): void {
    if (this.loginForm.valid) {
      console.log(this.loginForm.value); // 可正常获取表单值
    } else {
      this.loginForm.markAllAsTouched(); // 触发所有控件的校验提示
    }
  }
}

核心说明 #

• ControlValueAccessor是Angular表单系统的核心接口，用于让自定义组件适配表单逻辑，实现后即可像原生input一样使用formControlName。
• 子组件内部维护internalControl处理校验和值变化，通过onChange/onTouched回调自动同步值到父组件的FormGroup。
• 父组件的FormGroup可直接定义校验规则（与子组件校验共存），提交时通过loginForm.value即可获取完整表单数据。

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