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

Question

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

所有这些都很好，但缺少的部分是让孩子的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
}

Answer 1

你可以返回这样的东西

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>