angular2 - 부모 FormGroup의 하위 구성 요소에서 FormControlName의 유효성을 검사합니다.

Question

각 구성 요소는 각각 개별 필드를 나타내는 하위 구성 요소를 생성하는 양식/페이지에 해당합니다. 상위 구성 요소의 FormGroup이 하위 구성 요소에 포함 된 필드 내가 그렇게 할 경우에만 오류가 발생합니다 :

여기

A FormControlName must have a corresponding FormGroup.

내 부모 구성 요소에 대한 템플릿 코드입니다 :

<div class="form-group" [formGroup]="parentGroup"> 
    <table> 
    <tbody> 
     <tr *ngFor="let i of array"> 
     <child [property]="i" [options]="myForm.controls[i.id]"></child> 
     </tr> 
    </tbody> 
    </table> 
</div> 

양식은 여기에서 구성 요소 파일에 정의되어 있습니다. 아무것도

<td class="prompt"> 
    {{i.label}} 
</td> 
<td class="required" width="1%"> 
    <span *ngIf="property.required">*</span> 
</td> 
<td> 
    <input type="text " class="form-control" [ngClass]="{error: !options.valid}" formControlName="property.id"> 
</td> 
<td> 

가 정의 된 없지만 :

private formAttrs: FormGroup; 

constructor(private _fb: FormBuilder) { } 

ngOnInit() { 
    this.myForm = this._fb.group({}); 
    for (var i = 0; i < this.array.length; i++) { 
    this.formAttrs.addControl(this.array[i].id, new FormControl(this.array[i].value, Validators.required)); 
    } 
} 

하위 구성 요소에 대한 템플릿 코드는 이것이다 : 나는 얼마나 많은 아이 컴퍼넌트 우리가 추가하는에 따라 FormControls을 추가 해요 하위 구성 요소 클래스 ("속성"과 "옵션"에 전달 된 FormControl 요소 제외)에서 부모 구성 요소의 formGroup은 하위 구성 요소의 formControlName과 일치 할 수 있지만 대신 오류 :

EXCEPTION: Error in ./ChildComponent class ChildComponent - inline 
template:7:109 caused by: formControlName must be used with a parent 
formGroup directive. You'll want to add a formGroup directive and pass 
it an existing FormGroup instance (you can create one in your class). 

이 오류를 해결할 수있는 방법이 있습니까? 그렇지 않다면 누군가가 제안 할 수있는이 문제에 대한 또 다른 해결책이 있습니까?

미리 감사드립니다.

Answer 1

여기서 문제는 하나의 양식 그룹에서 동일한 양식 제어 이름을 여러 번 사용할 수 없다는 것입니다.

각 하위 구성 요소에 대해 고유 한 양식 그룹을 선언 한 다음 참조 특성을 기반으로 상위 구성 요소에서 반복 할 수 있습니다. 문서에서 볼 수 있듯이 지시문 구성 요소 메소드 FormGroupDirective.getControl(controlName)을 사용하여 각 하위 폼 컨트롤을 얻을 수 있습니다. https://angular.io/docs/ts/latest/api/forms/index/FormGroupDirective-directive.html

Answer 2

내가 Plunker에서 구현 한 몇 가지 사항이 있습니다.

child.component :

첫째, 우리는 우리가 FormGroup의 일부가되는 FormControls의 템플릿 엔진의 집행을 만족하는 FormGroup이 때문에 아이에게 부모에서 우리 formGroup 전달해야합니다. TS

@Input() parentGroup: FormGroup; 

child.component.html

<td [formGroup]="parentGroup"> 
<...> 
</td> 

그런 다음 [formControl]또는을 property.id으로 평가해야합니다. 그렇지 않으면 "속성"이름을 찾습니다.ID "

<input type="text " class="form-control" [ngClass]="{error: !options.valid}" [formControl]="options"/> 

또는

귀하의 코드가 formGroup 바인딩 그래서 내가 나서서 무슨 일이 있었는지에 관해서는 조금 불분명 한 그들을 붕괴 formAttrs를 사용하여 다른 변수를 사용했다

<input type="text " class="form-control" [ngClass]="{error: !options.valid}" formControlName="{{property.id}}"/> 

Plunker에서 볼 수 있습니다 : http://plnkr.co/edit/3MRiO9bGNFAkN2HNN7wg?p=preview