angular2`ngControlGroup` 자식 요소 내부

Question

나는 템플릿

<form [ngFormModel]="form"> 
    <div ngControlGroup="contents"> 
    <div ngControlGroup="title"> 
     <div *ngFor="let lang of languages$ | async" [ngControlGroup]="lang"> 
     <md-input ngControl="content"></md-input> 
     </div> 
    </div> 
    </div> 
</form> 

이 모양과 모양이

this.form = this.builder.group({ 
    contents: this.builder.group({ 
    title: this.builder.group({ 
     en: this.builder.group({ 
     id: this.builder.control(null), 
     content: this.builder.control('some english content') 
     }), 
     cs: this.builder.group({ 
     id: this.builder.control(null), 
     content: this.builder.control('some czech content') 
     }) 
    }) 
    }) 
}); 

모양과 나는

을 넣어 싶습니다 양식을 가지고

<div ngControlGroup="contents"> 
    <div ngControlGroup="title"> 
    <div *ngFor="let lang of languages | async" [ngControlGroup]="lang"><!-- --></div> 
    </div> 
</div> 

부품에 들어가는 부분은 다음과 같습니다.

필요 ngForm 또는 ngFormModel 하나의 자식, 그래서 내가 template에 투사됩니다 해당 입력에 ngControl을 수행하는 것을

<form-contents-item type="title" [languages]="languages$ | async"> 
    <md-input ngControl="content"></md-input> 
</form-contents-item> 

이

<div ngControlGroup="contents"> 
    <!-- `title` from @Input --> 
    <div [ngControlGroup]="title"> 
    <!-- `languages` from @Input --> 
    <div *ngFor="let lang of languages" [ngControlGroup]="lang"> 
     <!-- content projection here, probably using `ngTemplateOutlet`, since you can't iterate over ng-content --> 
    </div> 
    </div> 
</div> 

등의 템플릿 그러나 문제는있다. 그래서 질문은, 어떻게이 일을 할 수 있을까요? form 인스턴스를 내 form-contents-item에 공유하면 입력 자체가 아닌 그룹에서만 사용할 수 있습니다. 다른 뭔가?

Answer 1

ControlValueAccessor을 구현하여 ngModel과 호환되는 일반 구성 요소 만 생성하면됩니다.

Answer 2

나는 비슷한 문제를 겪었고 자식 구성 요소에 controlGroup을 설정하고 자식 구성 요소의 생성자 주입을 통해 컨트롤 그룹에 액세스 할뿐만 아니라 템플릿에 ngFormModel을 설정해야했습니다.

부모 템플릿 :

이

<form-contents-item [ngControlGroup]="content" type="title" [languages]="languages$ | async"> 
    <md-input ngControl="content"></md-input> 
</form-contents-item> 

아이 템플릿 :

이

<div [ngFormModel]="contents"> 
     <!-- `title` from @Input --> 
     <div [ngControlGroup]="title"> 
     <!-- `languages` from @Input --> 
     <div *ngFor="let lang of languages" [ngControlGroup]="lang"> 
      <!-- content projection here, probably using `ngTemplateOutlet`, since you can't iterate over ng-content --> 
     </div> 
     </div> 
</div> 

편집 : contents 내가 확실히 보이지 않아요 form-contents-item