angular - Why is that i can't inject the child component values into parent component? -
hie...i having child component has form.i trying inject form values of child parent. getting control group not able values.i have made plunker demo here http://plnkr.co/edit/i5fer6nhdqutt7rjrvya?p=preview
onsubmit(value) { console.log(this.app.addressform.value); console.log('you submitted value: ', value); }
this how getting value of child form have mentioned providers in parent component...somebody please tell me how form values of child component when entered it?
after having @ plunkr, see several possibilities here:
you can directly reference child component
address
1 usingviewchild
annotation. see answer angular2 : no provider string! (child -> string) in [array in parent@component({ (...) }) export class appcomponent { @viewchild(address) address:address; // app property (...) }
you can use
address
property when click on submit button have accessaddressform
property ofaddress
component.do want define , manage controls within
appcomponent
. if possible pass them parameter ofaddress
component. way work reference parent component know value when clicking on submit button. that:@component({ (...) }) export class address{ @input() address1ctrl:control; @input() cityctrl:control; constructor() { // no need configure controls here } } @component({ (...) template: ` (...) <address [address1ctrl]="myform.controls.address1" [cityctrl]="myform.controls.address1"></address> (...) ` }) export class appcomponent { constructor(fb: formbuilder) { this.myform = fb.group({ 'name': ['', validators.required], 'address1': new control('',validators.required), 'city':new control('',validators.required) 'phone': ['', validators.required] }); }
the last option implement
ngform
/ngcontrol
compliant component. it's bit more advanced approach. see answer more details: angular 2 custom form input
i refactored plunkr first approach. see new plunkr: http://plnkr.co/edit/steu4fz7b7txtro1lxgk?p=preview.
Comments
Post a Comment