为何自定义Angular控件的验证错误无法在父组件表单中显示？

问题描述 #

开发Angular 16的首个响应式表单自定义控件，包含滑块和输入框，需求如下：

• 滑块开启时，输入框必须有有效值
• 滑块关闭时，输入框值需为空

自定义组件HTML：

<div class="benefit-field">
    <div class="slide-toggle">
        <mat-slide-toggle [checked]="slideEnabled" (change)="updateEnabled($event)">Enabled?</mat-slide-toggle>
    </div>
    <div [ngClass]="{'disabled': !slideEnabled}">
        <mat-form-field>
            <mat-label>{{ typeName }}</mat-label>
            <input type="text" matInput [value]="valueId" [disabled]="!slideEnabled" (change)="onValueChanged($event.target)" />
        </mat-form-field>
    </div>
</div>

自定义控件的validate方法已在无效状态（滑块开启但输入框为空）返回{ required: true }，但父组件表单中，该控件的.value能正常获取值，.errors却始终为null，无法正确传递验证错误状态。

问题原因 #

1. Angular表单默认仅在控件值变化时触发验证，不会自动监听自定义组件内部的状态（如滑块的slideEnabled属性）变化，导致依赖内部状态的验证规则无法被触发。
2. 组件内部状态或值变化后，未主动通知Angular表单重新执行验证逻辑，验证结果无法同步到父表单控件。

修复步骤 #

1. 注入NgControl并关联控件 #

在自定义组件中注入NgControl，用于手动触发验证更新，同时解决循环依赖问题。

2. 状态/值变化时强制更新验证 #

在滑块切换、输入框值变化、初始值写入的方法中，调用updateValueAndValidity()强制Angular重新执行验证逻辑。

3. 优化验证逻辑 #

明确验证规则：滑块开启时必须有有效值，滑块关闭时值为空则有效。

修改后的自定义组件TypeScript代码 #

import { Component, forwardRef, Input, Inject } from '@angular/core';
import { AbstractControl, ControlValueAccessor, NG_VALIDATORS, NG_VALUE_ACCESSOR, ValidationErrors, Validator, NgControl } from '@angular/forms';
import { MatSlideToggleChange } from '@angular/material/slide-toggle';

@Component({
  selector: 'app-optional-benefit-field',
  templateUrl: './optional-benefit-field.component.html',
  styleUrls: ['./optional-benefit-field.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      multi: true,
      useExisting: OptionalBenefitFieldComponent
    },
    {
      provide: NG_VALIDATORS,
      multi: true,
      useExisting: forwardRef(() => OptionalBenefitFieldComponent),
    },
  ]
})
export class OptionalBenefitFieldComponent implements ControlValueAccessor, Validator {
  @Input() typeId: number;
  @Input() typeName: string; // 修正类型：标签文本应为string类型

  valueId: number;
  slideEnabled = false;

  onChange = (_valueId: number | null) => {};
  onTouched = () => {};
  touched = false;
  disabled = false;

  constructor(@Inject(forwardRef(() => NgControl)) public ngControl: NgControl) {
    // 关联当前组件到NgControl，避免循环依赖
    if (this.ngControl != null) {
      this.ngControl.valueAccessor = this;
    }
  }

  writeValue(valueId: number): void {
    this.slideEnabled = valueId && valueId > 0;
    this.valueId = valueId;
    // 初始值写入后触发验证更新
    this.ngControl?.control?.updateValueAndValidity();
  }

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

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

  markAsTouched(): void {
    if (!this.touched) {
      this.onTouched();
      this.touched = true;
    }
  }

  setDisabledState(isDisabled: boolean): void {
    this.disabled = isDisabled;
  }

  updateEnabled(event: MatSlideToggleChange): void {
    this.markAsTouched();
    this.slideEnabled = event.checked;
    
    this.onChange(this.slideEnabled ? this.valueId : null);
    // 滑块状态变化后触发验证更新
    this.ngControl?.control?.updateValueAndValidity();
  }

  onValueChanged(input: HTMLInputElement): void {
    const newValue = input.value ? +input.value : null;
    this.valueId = newValue;
    this.onChange(newValue);
    // 输入值变化后触发验证更新
    this.ngControl?.control?.updateValueAndValidity();
  }

  validate(control: AbstractControl): ValidationErrors | null {
    // 验证规则：滑块开启时，必须有大于0的值；滑块关闭时无要求
    if (this.slideEnabled && (!control.value || control.value <= 0)) {
      return { required: true };
    }
    return null;
  }
}

关键修改说明 #

• 注入NgControl并在构造函数中关联valueAccessor，解决自定义控件与表单验证的循环依赖问题。
• 在writeValue、updateEnabled、onValueChanged方法中调用updateValueAndValidity()，确保任何状态或值变化都能触发验证更新。
• 修正typeName的输入类型（原代码错误设置为number，实际应为string）。
• 简化并明确validate方法的逻辑，确保验证规则清晰可维护。

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