Object not passing from parent component to child onClick of submit button

Question

Hi I am trying to pass entire form Data in the form of object from parent component to child component .But it is coming as undefined .I am trying to set my form data object in FirstName variable in my child component .

Please help... what I am doing wrong

Below is my parent Component

import { Component } from '@angular/core';
import {SecondFormComponent} from './secondform.component';
@Component({
selector:'practice-form',
templateUrl:'app/firstform.component.html',

styles : [`h1{color:red;}
         .myClass{
            position:relative;left:546px ;
         }
          `],

})

export class FirstFormComponent{ 

    public applyClass = true ;
    public name ;
    public id ;
    public street ;
    public pcode ;    
    public city ;    
    public gender ;    

    public fname = "karan saxena" ;
    public val ;
    public genders = [
    { value: 'F', display: 'Female' },
    { value: 'M', display: 'Male' }
     ]; 
    onsubmit(value){


        this.gender =value.gender ;
        this.id = value.id;
        this.name = value.sname;
        this.city = value.city;
        this.pcode = value.pcode; 
        this.street = value.street;


        console.log(this.id);
        console.log(this.name);
        console.log(this.city);
        console.log(this.pcode);
        console.log(this.street);
        this.val = value ;       
        console.log(this.val);

    }
}

Next below is my template for first component

<div class="container">
<div [class.myClass]="applyClass" >
<h1>First Form</h1>
</div>
<form #userFrom="ngForm" novalidate (submit)="onsubmit(userFrom.value)">
<div class="form-group">
<label>Student id</label>
<input type= "text" #_idRef class="form-control" name="id" ngModel>   
<span>{{_idRef.className}}</span> 
</div>    

<div class="form-group">
<label>Student Name</label>
<input type= "text" class="form-control" name="sname" ngModel>    
</div>

<div class="form-group">
<label>Street</label>
<input type= "text" class="form-control" name="street" ngModel>    
</div>


<div class="form-group">
<label>City</label>
<input type= "text" class="form-control" name="city" ngModel>    
</div>


<div class="form-group">
<label>Postal Code</label>
<input type= "text" class="form-control" name="pcode" ngModel>    
</div>

<div class="form-group">
  <label>Gender</label>
    <div *ngFor="let gender of genders">
        <label>
        <input type="radio" name="gender"  [value]="gender.value" ngModel>
        {{gender.display}}
        </label>
    </div> 
 </div>

<button class="btn btn-primary">SUBMIT</button>
</form>    
</div>    


<div class="container">
<table class="table table-bordered">
<thead>
<th>id</th>
<th>name</th>    
<th>city</th>
<th>pcode</th>
<th>gender</th>
</thead>    

<tbody class="table-hover">
<tr  class="table-striped">  
<td>{{id}}</td>  
<td>{{name}}</td> 
<td>{{city}}</td> 
<td>{{pcode}}</td> 
<td>{{gender}}</td> 
</tr>      
</tbody>    

</table>
</div>

<table-form [FirstName] = 'val'></table-form> // here I am passing form object  to child 

Below is my child component

import { Component , Input } from '@angular/core';

@Component({
selector:'table-form',
templateUrl:'app/secondtform.component.html'
})

export class SecondFormComponent{
@Input() FirstName : object ;

}

below is my template for child :-

<div>
<h1>{{FirstName.sname}}</h1>
</div>    

Answer 1

I looked at your problem and here are few things I had to do to get the form and object passing to work:

1. There was no pname initialized, you have fname , so I changed that to sname .

2. I binded all the input fields to their associating variable with ngModel .

3. I added a ? in {{FirstName.sname}} to ensure Angular tries to render it only when sname is available.

4. Added a (click) event binding to update the gender value.

Please see the demo for more details.