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> 

часть в компонент, который будет выглядеть следующим образом

<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> 

Но проблема в том, что ngControlGroup должен быть ребенок либо ngForm или ngFormModel, и так же ngControl на этом входе, что я буду проецировать с template. Итак, вопрос в том, как я могу сделать эту работу? Поделитесь экземпляром form с моим form-contents-item, вероятно, будет работать только для группы, а не для самого входа? Так что-то еще?

Answer 1

Просто создайте нормальный компонент и совместите его с ngModel, выполнив ControlValueAccessor.

Answer 2

Я столкнулся с подобной проблемой, и мне нужно было установить контрольную группу на дочернем компоненте, получить доступ к управляющей группе через инъекцию конструктора в дочернем компоненте, а также установить 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> 

Edit: contents бы имя свойства, которое присваивается впрыскиваемого controlGroup в form-contents-item