Angular 反应形式验证子控件中所需的状态

问题描述

我有一个实现 ControlValueAccessor 和 Validator 的自定义组件。该组件用在 form 中，我在 HTML 中创建自定义控件时设置了 formControlName。

所有这些都运行良好，但缺少的部分是让孩子的 input 控件知道它应该是必需的。当必需组件中没有值时，我正在使用引导程序使字段显示为红色，但此子组件不会触发该错误。

我需要从 validate 方法返回什么来表示错误？我将以下内容作为验证的开始，它确实看到该字段是必需的，并且它没有值，但我不确定失败时应该返回什么。

validate(c: FormControl): ValidationErrors | null {
    if (c.value)
        return c.value instanceof WorkerDTO ? null : {isWorkerObject: false}

    const validator = c.validator?.({} as AbstractControl)
    return validator && validator.required ? {hasValue: false} : null
}

解决方法

你可以返回这样的东西

validate(c: FormControl): ValidationErrors | null {
    const validator = c.validator?.({} as AbstractControl)
    if (validator && validator.required) {
        if (c.value === undefined || c.value === null) 
            return {c: true}

来自角度文档

验证错误对象通常有一个属性，其名称是验证键 .... ，其值是您可以插入到错误消息中的任意值字典，

编辑。

我的回答显示将字段返回为无效。那么如果你想在视图中显示显式错误，一种方法是使用验证器的名称在 html 中抓取错误

例如来自angular doc：

<div *ngIf="name.errors?.required">
    Name is required.
  </div>
  <div *ngIf="name.errors?.minlength">
    Name must be at least 4 characters long.
  </div>
  <div *ngIf="name.errors?.forbiddenName">//this is a custom validator
    Name cannot be Bob.
  </div>