각도 2 + typescript 컴파일 타임에 속성을 찾을 수 없습니다.

Question

각도 2에 사용자 지정 폼 유효성 검사 메서드를 작성하려고합니다. 프로젝트를 실행할 때 다음 오류가 발생하는 문제가 있습니다.

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

그러나 무시하고 내 응용 프로그램을 계속 사용하면 유효성 검사 기능이 계획대로 작동한다는 것을 알 수 있습니다.

누구든지이 문제에 직면 해 있습니까? 왜이 오류가 발생합니까? 나는 그 자체가 아니라 typescript와 관련이있다. (필자는 typescript 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

하위 컬렉션/사전 controls은 파생 클래스 FormGroup 및 FormArray에 정의되어 있습니다.

이

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

에는 컴파일러가 는 (심지어 런타임)가 제대로 해당 추상적가있는 경우를 반복하지 않습니다 : 우리는 (controls 유형의 사전입니다) FormGroup을 반복 할 경우에 따라서, 우리는이 검사를 할 필요가있을 것이다 컨트롤은 우리가 값을 오는 AbstractControl

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

것을 확실히해야, 또한 FormGroup 예를

입니다

하위 유형이 아님 FormControl. 부속 유형 중 일부 (예를 들어 FormArray)를 경우에만 추상 기본은 제대로 확인 할 수

조정 코드 (check in playground)가있다 :

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