将验证器传递给子组件

Question

我正在使用一个 angular 子组件，它使用反应式 forms 实现ControlValueAccessor 。 子组件本质上只是用一些额外的东西包装另一个组件。 所以在父母中，当我这样做时：

<app-child formControlName="foo"></app-child>

表单组知道 foo 是必需的。 在子组件中，我如何确定它是必需的？ 本质上，我需要将 HTML 中的 required 属性添加到被包装的组件中。

Answer 1

如果始终需要子组件，则可以实现Validator接口，并在子组件中提供NG_VALIDATORS令牌，以将无效的 state 与父表单组同步。

您可以尝试以下方法：

@Component({
  // ...
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => ChildComponent),
      multi: true,
    },
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => ChildComponent),
      multi: true,
    },
  ],
})
export class ChildComponent implements ControlValueAccessor, Validator {
  innerCtrl: FormControl; // Use it to access the inner component value and invalid state.
  onValidationChange: () => void;

  validate(control: AbstractControl): ValidationErrors | null {
    if (this.innerCtrl.invalid) {
      return { invalid: true };
    } else {
      return null;
    }
  }

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

  // ...
}