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"];
    }
}