“AbstractControl”类型上不存在属性“控件”？答案

【问题标题】：Property 'controls' does not exist on type 'AbstractControl?“AbstractControl”类型上不存在属性“控件”？
【发布时间】：2021-08-29 15:52:04
【问题描述】：

我正在尝试实现 ValidatorFn 接口，但是，当我尝试在“AbstractControl”类型的 formGroup 上使用“控件”属性时遇到问题，错误是：“属性 '控件'不存在于type 'AbstractControl'"，我最初试图将 formGroup 设置为 type 'FormGroup'，但是，这带来了一系列错误。我的ValidatorFn接口如下：

1. import { FormGroup, ValidatorFn, AbstractControl } from '@angular/forms';
2. export function requireCheckboxesToBeCheckedValidator(minRequired = 1): ValidatorFn {
3.   return function validate (formGroup: AbstractControl) {
4.     let checked = 0;
5. 
6.     Object.keys(formGroup.controls).forEach(key => {
7.       const control = formGroup.controls[key];
8. 
9.       if (control.value === true) {
10.         checked ++;
11.       }
12.     });
13. 
14.     if (checked < minRequired) {
15.       return {
16.         requireOneCheckboxToBeChecked: true,
17.       };
18.     }
19. 
20.     return null;
21.   };
22. }

使用第 6 行和第 7 行的 controls 属性时出现错误。使用 AbstractControl 类型的 formGroup 时是否有解决方法？

【问题讨论】：

由于FormGroup 继承于AbstractControl，如果您知道您的验证器将始终应用于FormGroup，您可以更改函数中的类型（例如，将formGroup: AbstractControl 替换为formGroup: FormGroup )。否则，您可以编写一个类型保护并在您的验证器中使用它，在类型不匹配的情况下返回 null 或抛出异常。
@TotallyNewb 关于在上述情况下实现类型保护，您可能没有很好的参考吗？我对类型守卫不熟悉？

标签： angular typescript forms

【解决方案1】：

你可以添加一个类型保护来确保你有一个FormGroup，你也可以在你只有一个FormControl或FormArray时处理这种情况。

export function requireCheckboxesBeCheckedValidator(minRequired = 1): ValidatorFn {
  return (formControl: AbstractControl) => {
    let ctrls: AbstractControl[];
  
    if (formControl instanceof FormGroup) {
      ctrls = Object.values(formControl.controls);
    } else if (formControl instanceof FormArray) {
      ctrls = formControl.controls;
    } else {
      ctrls = [ctrls];
    }
            
    const checked = formControl.controls.filter(({ value }) => value === true);

    return checked < minRequired ? { requireOneCheckboxToBeChecked: true } : null;
  }
}

【讨论】：