Angular 2 + typescript 在编译时找不到属性

Question

我正在尝试在 angular 2 中构建自定义表单验证方法。问题是，当我运行该项目时，出现以下错误：

Property 'controls' does not exist on type 'AbstractControl'.

但是如果我忽略它并继续使用我的应用程序，我会看到验证功能按计划工作。

还有其他人面临这个问题吗？ 为什么我会收到此错误？ 我正在加气，这与打字稿有关，而不是与角度本身有关（我使用的是打字稿 2.0.3）。

这是我的代码：

进口：

import {Injectable} from '@angular/core';
import {RegexService} from "./regex.service";
import {FormControl, ValidatorFn} from "@angular/forms";

自定义验证功能：

requireGroupMinAmount(minPossibleAmount): ValidatorFn {
    return (control: FormControl): string[]=> {
        let requireCounter = 0;
        if (!control)
            return null;


        controlsLoop:for (let formOptionKey in control.controls) {
            for (let formOptionValue in control.controls[formOptionKey].controls) {
                if (control.controls[formOptionKey].controls[formOptionValue].value)
                    requireCounter++;
                if (requireCounter >= minPossibleAmount)
                    break controlsLoop;
            }
        }

        return requireCounter >= minPossibleAmount
                               ? null 
                               : ["Please fill at least " + minPossibleAmount + " fields"];
    }
}

提前致谢。

Answer 1

FormGroup /字典controls在派生类FormGroup和FormArray上定义。 因此，如果我们想要迭代FormGroup （哪些controls属于字典类型） ，我们需要进行以下检查：

if (control instanceof FormGroup)
{
    controlsLoop:for (let formOptionKey in control.controls) {
    ...
    }
}

只有当抽象控件是FormGroup实例时，编译器（甚至运行时）才会正确迭代

此外，我们必须确定，即将到来的值是AbstractControl

requireGroupMinAmount(minPossibleAmount): ValidatorFn {
    //return (control: FormControl): string[]=> {
    return (control: AbstractControl): string[]=> {

而不是子类型FormControl 。 只有抽象基类可以正确检查它是否属于它的某些子类型（例如 FormArray）

有调整的代码片段（ 检查操场）：

requireGroupMinAmount(minPossibleAmount): validatorFn{
    return (control: AbstractControl): string[] => {
        let requireCounter = 0;
        if (!control)
            return null;

        if (control instanceof FormGroup) {
            controlsLoop: for (let formOptionKey in control.controls) {

                var childControl: AbstractControl = control.controls[formOptionKey];

                if (childControl instanceof FormGroup) {
                    for (let formOptionValue in childControl.controls) {
                        if (childControl.controls[formOptionValue].value)
                            requireCounter++;
                        if (requireCounter >= minPossibleAmount)
                            break controlsLoop;
                    }
                }
            }
        }

        return requireCounter >= minPossibleAmount
            ? null
            : ["Please fill at least " + minPossibleAmount + " fields"];
    }
}