angular - Dividing a form into multiple components with validation -

i want create single big form angular 2. want create form multiple components following example shows.

app component

<form novalidate #form1="ngform" [formgroup]="myform"> <div>     <address></address> </div> <div>     <input type="text" ngmodel required/> </div>  <input type="submit" [disabled]="!form1.form.valid" > </form> 

address component

<div> <input type="text" ngmodel required/> </div> 

when use code above visible in browser needed submit button not disabled when delete text in address component.
button disabled correctly when delete text in input box in app component.

as mentioned, hard template-driven form, model-driven form can achieved quite easily. comment:

is there other simple example one? maybe same example without loops

i can give example. need do, nest formgroup , pass on child.

let's form looks this, , want pass address formgroup child:

ngoninit() {   this.myform = this.fb.group({     name: [''],     address: this.fb.group({ // create nested formgroup pass child       street: [''],       zip: ['']     })   }) } 

then in parent, pass nested formgroup:

<address [address]="myform.controls.address"></address> 

in child, use @input nested formgroup:

@input() address: formgroup; 

and in template use [formgroup]:

<div [formgroup]="address">   <input formcontrolname="street"><br>   <input formcontrolname="zip"> </div> 

the thing is, don't need use @output here, changes in form fields caught parent! :)

here's

demo

more info here nested model-driven forms.