angular 2 form level validation using components -

in angular 2 how add input control in custom component bind form control container in parent component? (following code simplified brevity)

for example, have form component (please note button disabled binding)

@component{ selector:'my-form', template:' <form [ng-form-model]="myform">     <my-special-input></my-special-input> </form> <button [disabled]="!myform.valid"> ' } 

now in special input component

@component{  selector:'my-special-input'  template:'     <input ng-control='name' required> }' 

ng-control='name' generates error "no provider controlcontainer!" have searched solutions , haven't found allow parent form control container validation.

i think creating custom reusable input components added form control container common scenario in angular 2.

i cant image there there no way add input in custom component parent form component in way enable form level validation.

not sure if best way scenario, think works.

you can create control on parent element , pass @input child. child can use control on form element.

for example (plunk):

@component({   selector:'my-special-input'   template:`         <input type="text" [ngformcontrol]='namecontrol' >      ` }) export class specialinputcomponent implements oninit{   @input() namecontrol; }  @component({   selector:'my-form',   template:`     <form [ngformmodel]="myform" >        <my-special-input [namecontrol]="namecontrol"></my-special-input>     </form>     <button [disabled]="!myform.valid">submit</button>     `,     directives: [specialinputcomponent] }) export class formcomponent{     namecontrol:control;     myform: controlgroup;      constructor(){         this.namecontrol = new control("", validators.required );         this.myform = new controlgroup({special: this.namecontrol});         } } 

you pass controlgroup child , let child add addcontrol() might have deal update cycle getting little messy.