对象不从父组件传递到提交按钮的孩子

Question

嗨，我试图以对象的形式传递整个表单数据，从父组件到子组件。我的孩子组件中的firstName变量中的表单数据对象。

请帮忙...我做错了什么

以下是我的父元

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);
    }
}

下一个是我的第一个组件的模板

<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 

下面是我的孩子组成部分

import { Component , Input } from '@angular/core';
@Component({
selector:'table-form',
templateUrl:'app/secondtform.component.html'
})
export class SecondFormComponent{
@Input() FirstName : object ;
}

下面是我的孩子模板： -

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

Answer 1

我看了您的问题，这是我要做的几件事以使表格和对象传递到工作：

1. 没有pname初始化，您有fname，所以我将其更改为sname。

2. 我将所有输入字段与ngModel的关联变量相结合。

3. 我在{{FirstName.sname}}中添加了?，以确保Angular尝试仅在sname时才渲染。

4. 添加了(click)事件绑定以更新gender值。

请参阅演示有关的更多详细信息。