2016-06-04 15 views
0

Ich habe eine Form, die in der Vorlage wie folgt aussiehtangular2 `ngControlGroup` innerhalb einer untergeordneten Komponente

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

und die Form sieht aus wie dieses

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') 
     }) 
    }) 
    }) 
}); 

und ich möchte den

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

Teil in eine Komponente, sieht das würde dies wie

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

und seine Vorlage wie dies

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

Aber das Problem ist, dass ngControlGroup Bedürfnisse Kind entweder von ngForm oder ngFormModel, und so auch ngControl an diesem Eingang sein, dass ich mit template projizieren werde. Die Frage ist also, wie kann ich das funktionieren lassen? Teilen Sie die form Instanz zu meinem form-contents-item, würde wahrscheinlich nur für die Gruppe arbeiten, nicht für den Eingang selbst? Also noch etwas?

Antwort

0

Erstellen Sie einfach eine normale Komponente und machen Sie es kompatibel mit ngModel, indem Sie ControlValueAccessor implementieren.

+0

zugeordnet ist bin ich nicht ganz zu sehen, wie ist das wird helfen:/Ich kann eine Komponente, die mit 'ngModel' kompatibel ist, in Ordnung bringen, aber das funktioniert nur für' ngControl', nicht 'ngControlGroup', oder? Welcher Teil wird das lösen? – foxx

+0

Wozu dient die Komponente als Kontrollgruppe? Ich denke nicht, dass das unterstützt wird. –

+0

Ich brauche keine Komponente als ControlGroup, ich will dieses Bit einfach nicht mit 'ngControlGroup =" contents "' und 'ngControlGroup =" title "' und 'ngFor' DRY machen, da das einzige was sich ändern würde ist der "Titel". Also dachte ich, ich würde eine Komponente machen, den "Titel" -Teil übergeben und damit fertig sein. Aber das würde nicht funktionieren, weil "ngControlGroup" Kind von 'ngForm' sein muss. – foxx

0

Ich konfrontiert ein ähnliches Problem, und was ich tun musste, war die controlGroup auf die untergeordnete Komponente, Zugriff auf die Kontrollgruppe über Konstruktorinjektion in der untergeordneten Komponente, sondern auch die ngFormModel in der Vorlage.

Eltern Vorlage:

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

Kinder Vorlage:

<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 würde den Namen der Eigenschaft, die das injizierte controlGroup in form-contents-item

+0

Ja, das ist es, was ich getan habe, aber das löst nur den ersten Teil des Problems, der andere ist, wenn man versucht, '' oder '[ngTemplateOutlet]' zu verwenden, das bricht auch die "Bindung". – foxx

Verwandte Themen