Angular自定义输入组件表单验证失效问题求助

你的自定义输入组件验证失效的核心问题是模板中硬编码了formControlName值，没有使用传入的controlName输入属性，同时输入框未关联表单控件的验证状态。以下是具体修复步骤：

1. 修正自定义输入组件的模板绑定 #

修改input.component.html，将硬编码的formControlName="fullname"改为动态绑定传入的controlName，并添加验证状态的样式绑定：

<input 
  type="text" 
  [formControlName]="controlName" 
  class="form-control"
  [ngClass]="{'is-invalid': control.invalid && (control.touched || control.dirty)}"
/>

2. 确保组件正确关联父表单 #

你的InputComponent已经通过ControlContainer注入了父表单上下文，这部分逻辑正确，可在ngOnInit中添加简单校验避免空指针：

export class InputComponent implements OnInit {
  @Input() public controlName: string;

  constructor(@Optional() private controlContainer: ControlContainer) {}

  get form(): FormGroup {
    return this.controlContainer.control as FormGroup;
  }

  get control(): FormControl {
    return this.form.get(this.controlName) as FormControl;
  }

  ngOnInit() {
    if (!this.control) {
      console.error(`Form control "${this.controlName}" does not exist in parent form`);
    }
  }
}

3. 父组件错误提示优化（可选） #

父组件的错误提示逻辑可用，若想让错误提示更及时，可将触发条件改为用户触碰输入框或提交表单后显示：

<div *ngIf="(submitted || f.fullname.touched) && f.fullname.errors" class="invalid-feedback">
  <div *ngIf="f.fullname.errors.required">Fullname is required</div>
</div>

修复原理 #

• 动态绑定[formControlName]="controlName"后，自定义输入组件才能正确关联父表单中对应的控件，同步值和验证状态。
• 添加ngClass绑定后，输入框会根据控件的invalid、touched状态自动应用错误样式，让用户直观看到验证状态。
• ControlContainer注入确保组件能获取到父表单的上下文，无需手动传递整个表单对象。

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