유형 'AbstractControl' Angular 4에 속성 '컨트롤'이 없습니다.

유형 'AbstractControl' Angular 4에 속성 '컨트롤'이 없습니다.

이 질문에는 이미 답변이 있습니다.

Angular2: 유형 'AbstractControl'에 속성 '컨트롤'이 없습니다.인덱스를 통해 폼 배열 내 개체의 .control에 액세스하는 동안 오류가 발생했습니다. (5개의 답변)

닫힘3년 전.

Angular 4에서 네스트된 반응 형태를 시도하고 있습니다.정상적으로 동작하고 있습니다만, AOT를 구축하려고 하면 에러가 발생합니다.

'AbstractControl' 유형에 'controls'가 없습니다.

나는 구글을 검색해서 몇 가지 시도를 해봤지만 운이 없었다.누가 이 문제를 어떻게 해결해야 하는지 말해줄 수 있나요?

<div [formGroup]="myForm">
    <div formArrayName="addresses">
        <div *ngFor="let address of myForm.get('addresses').controls; let i=index" 
                    class="panel panel-default">
            <span *ngIf="myForm.get('addresses').length > 1"
                    (click)="removeAddress(i)">Remove</span>
            <div [formGroupName]="i">
                <mat-form-field>
                    <input matInput formControlName="city" placeholder="city" value="">
                </mat-form-field>
            </div>

        </div>
    </div>
    <a (click)="addAddress()" style="cursor: default"> Add +</a>
</div>

아래 스크립트 코드 입력

constructor(private _fb: FormBuilder) {     
}

ngOnInit() {
    this.myForm = this._fb.group({
        addresses: this._fb.array([
            this.initAddress(),
        ])
    });
}
initAddress() {
    return this._fb.group({
        city: ['']
    });
}
addAddress() {
    const control = <FormArray>this.myForm.get('addresses');
    control.push(this.initAddress());
}
removeAddress(i: number) {
    const control = <FormArray>this.myForm.get('addresses');
    control.removeAt(i);
}

@Günter Zöchbauer의 코멘트에 근거해, 우선 i가 변경되었습니다.

myForm.controls['addresses']로.myForm.get('addresses')html과 타이프스크립트 양쪽으로

그리고 @yuruzi 코멘트를 기반으로 합니다.

변경되었다.myForm.get('addresses').controls로.myForm.get('addresses')['controls']

지금은 잘 되고 있어요.@gunter & yuruzi 감사합니다

그래도 쉽게 고칠 수 있어요.컨트롤 취득 로직을 컴포넌트 코드의 메서드에 아웃소싱합니다(.ts파일):

getControls() {
  return (this.recipeForm.get('controlName') as FormArray).controls;
}

템플릿에서 다음을 사용할 수 있습니다.

*ngFor="let ingredientCtrl of getControls(); let i = index"

이 조정은 TS가 작동하는 방식과 Angular가 템플릿을 구문 분석하기 때문에 필요합니다(TS를 이해하지 못합니다).

바꾸다myForm.get('addresses').controls로.myForm.get('addresses').value이 문제도 해결됩니다.

@sunny kashyap 솔루션의 업데이트로서 다음과 같이 쓰고 싶습니다.

getControls() {
  return (this.recipeForm.get('controlName') as FormArray).controls;
}

검증 오류에 대해서는 다음을 사용하십시오.

<span *ngIf="f.YOUR_FORM_KEY.controls.YOUR_FORM_KEY.errors?.YOUR_FORM_VALIDATION">YOUR_FORM_KEY is YOUR_FORM_VALIDATION</span>

예:

<span *ngIf="f.name.controls.name.errors?.required">Name is required</span>

ts 파일

get f(): any {
    return this.userForm.controls;
}

의 길이를 재다FormArray, 심플하게 사용length:

<span *ngIf="myForm.controls['addresses'].length > 1" (click)="removeAddress(i)">Remove</span>

도움이 되었으면 좋겠다

커스텀 인터페이스 사용 가능

// Define AbstractFormGroup
export interface AbstractFormGroup extends FormGroup {
  controls: {
    [key: string]: AbstractFormGroup & AbstractFormGroup[] & AbstractControl & FormGroup & FormArray,
  }
}

// Usage example
class ... {
  myForm: AbstractFormGroup
  ...
  this.myForm = this.fb.group({...}) as AbstractFormGroup
}

언급URL : https://stackoverflow.com/questions/46926182/property-controls-does-not-exist-on-type-abstractcontrol-angular-4