CODEWITHSUNDEEP
angular
abhilash reddy
abhilash reddy

Reputation: 1586

How to get the form values of parent component along with child component?

I have a child component(Address info) and Parent component(Basic info) in a model driven form......Somebody please help me to get the data as mentioned below when click on a 'Submit' button.....plunker demo http://plnkr.co/edit/ZKPTrP2bGmKZkElShGj0?p=preview 

submitted value: 
{
"firstname": "",
"lastname": "",
"addressinfo":{
   "Line1":"",
   "Line2":"",
 }
}

I dont want to use ngmodel in my child form...Somebody help me to find the approach to get this

Upvotes: 2

Views: 1720

Answers (1)

Thierry Templier
Thierry Templier

Reputation: 202316

You need to create an empty group in the parent child for addressinfo:

this.myForm = fb.group({  
  'firstname':  ['', Validators.required],
  'lastname':  ['', Validators.required]  
  'addressinfo': fb.group()
});

Then you need to pass this group control to the child component:

<child [control]="myForm.controls.addressinfo"></child>

In the child component, you need to add an input for this control and create sub control corresponding to your Line* fields:

@Component({ ... })
export class ChildComp {  
  @Input()
  control:Control;

  ngOnInit() {
    this.control.addControl('Line1', new Control('', Validators.required));
    this.control.addControl('Line2', new Control('', Validators.required));
  }
}

Finally you can attach these sub controls on the inputs in your sub component:

<div class="field">  
  <label>Line1</label>  
  <input type="text" [ngFormControl]="control.controls['Line1']">
</div>

<div class="field">  
  <label>Line2</label>  
  <input type="text" [ngFormControl]="control.controls['Line2']">
</div>

Here is the updated plunkr: http://plnkr.co/edit/Bigo3DNnLTixW9ONry1e?p=preview.

Upvotes: 2

Related Questions