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 using viewchild 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 access addressform property of address component.

  • do want define , manage controls within appcomponent. if possible pass them parameter of address 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

Popular posts from this blog

sublimetext3 - what keyboard shortcut is to comment/uncomment for this script tag in sublime -

java - No use of nillable="0" in SOAP Webservice -

ubuntu - Laravel 5.2 quickstart guide gives Not Found Error -