angular - 3 embedded components and form element in reactive forms -
lets have 3 components:
personalinfocomponent : parent component [level1]
addresscomponent : component embedded inside [level2] personalinfocomponent
- countrycomponent : component embedded inside addresscomponent [level3]
personalinfocomponent consists of multiple input fields in html template file , html template looks similar following:
<form (ngsubmit)="processform()" [formgroup]="form"> <div layout-gt-sm="row" fxlayout="column" fxlayoutalign="center center"> <span><h1>this big box</h1></span> <div flex-gt-sm="50" fxlayoutalign="center start"> <md-card style="padding-left: 0; padding-right: 0"> <md-list> <md-list-item fxlayout="row" fxlayoutalign=" center"> <span fxflex="35" class="md-list-item-text">name</span> <span fxflex="55"> <md-input-container> <input mdinput name="name" type="text" required formcontrolname="name"> </md-input-container> </span> </md-list-item> <address [countryid]="this._currentuser.countryid" [address]="this._currentuser.address" [addressform]="form.controls['address']"></address> <md-divider></md-divider> </md-list> </md-card> </div> </form> you can see have embedded addresscomponent inside personalinfo component template. questions :
should use form element inside html template of both addresscomponent , countrycomponent? working solution contains form element every single embedded elements(this works cant comprehend how!) if not how define formgroup element on template without form element on child components templates? on components .ts file can inject form parent using @input directive no problem cant underestand multiple form elements on embedded components templates??
when build form inside personalinfocomponent, had following make work:
buildform() { this.form = this.fb.group({ name: [this.currentuser ? this.currentuser.name : ''], address: this.fb.group({ postcode: [this.currentuser ?this.currentuser.address.postcode: ''], country:this.fb.group({country[this.currentuserthis.currentuser.countryid:'']})} why need initialise country control inside personalinfocomponent in addition addresscomponent? mean if have n-number of embedded components inside each other parent (mother component) component needs initialise embedded components? shouldn't responsibility of containing component create control (addresscomponent create countrycomponent)?
Comments
Post a Comment