Angular 4自定义输入组件验证状态未同步至外部表单

嗨，这个问题我太熟悉了！你遇到的核心矛盾是：你的自定义组件虽然实现了ControlValueAccessor来同步输入值，但没有把内部输入的验证状态同步到外部表单控件。内置required能正常工作，是因为你同时在组件和内部textarea上绑定了required属性，相当于内外做了双重验证；但customMaxLength验证器只作用在内部textarea上，外部的组件表单控件完全不知道内部已经触发了错误，所以才会出现“内部输入标红，外部表单还显示有效”的奇怪情况。

下面给你一步步的解决方案：

第一步：让自定义组件实现Validator接口并注册验证器提供者 #

我们需要让组件本身成为一个可验证的控件，这样外部表单就能直接感知到它的验证状态。修改你的组件代码：

修改后的组件TypeScript代码 #

import { Component, Input, forwardRef, ViewChild } from '@angular/core';
import { NgModel, ControlValueAccessor, NG_VALUE_ACCESSOR, AbstractControl, Validator, NG_VALIDATORS, ValidationErrors } from '@angular/forms';

@Component({
  selector: 'custom-text-area',
  templateUrl: './custom-text-area.component.html',
  styleUrls: ['./custom-text-area.component.less'],
  providers: [
    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TextAreaComponent), multi: true },
    // 新增：注册组件作为验证器提供者
    { provide: NG_VALIDATORS, useExisting: forwardRef(() => TextAreaComponent), multi: true }
  ]
})
export class TextAreaComponent implements ControlValueAccessor, Validator {
  @Input() required = false;
  @Input() name;
  @Input() data;
  @Input() disabled;
  @Input() placeholder = '';
  @Input() errorMsg;
  @Input() maxLength = null;
  @ViewChild('input') input: NgModel;
  
  // 用于同步验证状态变化的回调函数
  private onValidatorChange: () => void;

  constructor() {
    this.data = '';
  }

  // --- ControlValueAccessor 接口实现 ---
  propagateChange = (_: any) => {};
  writeValue(value: any): void {
    if (value !== undefined) {
      this.data = value;
    } else {
      this.data = '';
    }
  }
  registerOnChange(fn: any): void {
    this.propagateChange = fn;
  }
  registerOnTouched(fn: any): void {}
  setDisabledState?(isDisabled: boolean): void {
    this.disabled = isDisabled;
  }
  onInput(e) {
    this.data = e.target.value || '';
    this.propagateChange(this.data);
    // 输入变化时通知外部更新验证状态
    if (this.onValidatorChange) {
      this.onValidatorChange();
    }
  }

  // --- Validator 接口实现 ---
  validate(control: AbstractControl): ValidationErrors | null {
    // 直接代理内部input的验证结果，让外部拿到所有内部错误
    if (this.input && this.input.errors) {
      return { ...this.input.errors };
    }
    return null;
  }

  registerOnValidatorChange(fn: () => void): void {
    this.onValidatorChange = fn;
  }
}

第二步：调整内部textarea的验证绑定 #

现在组件会自动代理内部输入的验证结果，你可以保留内部textarea的验证绑定，确保组件能获取到错误信息：

修改后的组件HTML代码 #

<textarea 
  [disabled]='disabled' 
  [required]='required' 
  [placeholder]="placeholder" 
  (input)="onInput($event)" 
  [(ngModel)]="data" 
  [name]="name" 
  #input="ngModel"
  [customMaxLength]="maxLength"
></textarea>
<span *ngIf="input.errors && (input.dirty || input.touched)">
  <span *ngIf="input.errors?.required" class="error-message">Required!</span>
  <span *ngIf="input.errors?.customMaxLength" class="error-message">Max Length Reached({{maxLength}})</span>
</span>

第三步：验证器指令可继续使用 #

你的MaxLengthValidatorDirective可以保留，它依然作用在内部textarea上，而组件的validate方法会把这些错误传递给外部表单。如果想更简洁，也可以把验证逻辑直接写到组件的validate方法里，省去指令，但保留指令完全没问题。

为什么这样修改能解决问题？ #

1. 组件实现Validator接口并注册NG_VALIDATORS后，外部表单会将其视为可验证控件，主动调用它的validate方法获取错误状态。
2. validate方法直接返回内部textarea的错误对象，让外部表单能拿到所有内部的验证错误（包括required和customMaxLength）。
3. registerOnValidatorChange和onInput里的回调，确保输入内容变化导致验证状态改变时，外部表单能及时更新状态。

现在你再测试一下：当输入超过3个字符时，不仅内部textarea会标红，custom-text-area组件本身会添加ng-invalid类，外部的<form>也会变成ng-invalid状态，完美同步！

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