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

我查看了你的问题，这里有一些我必须做的事情才能让表单和对象传递给你的工作：

没有pname初始化，您有fname，因此我将其更改为sname。
我将所有输入字段绑定到与ngModel关联的变量。
我在?中添加了{{FirstName.sname}}，以确保Angular仅在sname可用时尝试呈现它。
添加了(click)事件绑定以更新gender值。

有关详细信息，请参阅demo。

对象没有从父组件传递到子onClick提交按钮

1 个答案: