Angular数据驱动表单自定义组件验证问题求助

我有一个包含自定义文件上传组件的表单，页面会根据服务器数据渲染多个该组件。目前尝试实现组件内的验证逻辑，写出了以下isInvalid函数：

get isInvalid(): boolean {
  const formEl = this.form.get('inputFile');
  if (!formEl) {
    return true;
  }

  return formEl.touched && formEl.invalid;
}

当前问题：自定义组件的验证无法感知自身在表单中的位置，但表单本身可正常增删文件，已做示例演示该问题。

解决方案与代码修改建议 #

1. 直接传入对应FormControl（简易方案） #

由于组件动态存在于FormArray中，每个实例对应FormArray内的一个FormControl，原代码中this.form.get('inputFile')无法定位到正确的控件。可以给自定义组件添加@Input接收当前绑定的控件：

自定义组件代码修改：

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

@Component({
  selector: 'app-input-file',
  templateUrl: './input-file.component.html',
})
export class InputFileComponent {
  @Input() control!: FormControl;

  get isInvalid(): boolean {
    return this.control.touched && this.control.invalid;
  }
}

父组件模板修改：

<div formArrayName="files">
  <div *ngFor="let fileControl of files.controls; let i = index" [formGroupName]="i">
    <app-input-file [control]="fileControl"></app-input-file>
  </div>
</div>

2. 基于ControlValueAccessor关联控件（规范方案） #

如果自定义组件实现了ControlValueAccessor，可以通过NgControl自动获取当前绑定的表单控件，无需额外传参：

自定义组件代码修改：

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

@Component({
  selector: 'app-input-file',
  templateUrl: './input-file.component.html',
})
export class InputFileComponent implements ControlValueAccessor {
  constructor(@Self() private ngControl: NgControl) {
    this.ngControl.valueAccessor = this;
  }

  get isInvalid(): boolean {
    const control = this.ngControl.control;
    return !!control && control.touched && control.invalid;
  }

  // 实现ControlValueAccessor的必填方法
  writeValue(value: File | null): void {
    // 处理传入值的逻辑
  }

  registerOnChange(fn: (value: File | null) => void): void {
    // 绑定值变更回调
  }

  registerOnTouched(fn: () => void): void {
    // 绑定触摸状态变更回调
  }
}

3. 确保验证规则正确绑定 #

检查父组件中创建FormArray控件时，是否为每个FormControl添加了对应的验证规则，比如：

// 父组件中创建单个文件控件的逻辑
private createFileControl(): FormControl {
  return new FormControl(null, [Validators.required]); // 按需添加验证器，比如文件类型、大小验证
}

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