如何在Angular中将表单数据从子组件传输到父组件

Posted 2023-02-23

【中文标题】如何在Angular中将表单数据从子组件传输到父组件

【英文标题】：How can I transfer form data from child to parent component in Angular

【发布时间】：2021-06-19 21:19:22

【问题描述】：

我想将完整的表单数据从一个“注册”组件传递到根组件（应用程序组件）。但是当我尝试在 app.component 中打印表单数据时，它只是打印“对象”，当我尝试访问变量时，它显示为未定义。

register.component.html

<div class="form-div">
    <form #regForm="ngForm" (ngSubmit)="collect(regForm.value)">
        <table>
            <tr>
                <td>User Name:</td>
                <td>
                    <input type="text" name="uname" class="form-control" [(ngModel)]="data.uname"></td>
                    <td>data.uname</td>
            </tr>
            <tr>
                <td>Contact:</td>
                <td>
                    <input type="number" name="contact" class="form-control"  [(ngModel)]="data.contact">
                </td>
                <td>data.contact</td>
            </tr>
            <tr>
                <td>Gender:</td>
                <td>
                    <input type="radio" name="gender" [(ngModel)]="data.gender" value="Female">Female
                    <input type="radio" name="gender" [(ngModel)]="data.gender" value="Male">Male </td>
                    <td>data.gender</td>
            </tr>
            <tr>
                <td>Qualification: </td>
                <td>
                    <span *ngFor="let item of qualification">
                        <input type="checkbox"  [(ngModel)]="item.ischecked" (change)="changeSelection()" name=" " id=item.id/>
                        item.label
                    </span>
                </td>
                <td>
                    <span *ngFor="let item of selected">
                        item
                    </span>
                </td>

            </tr>
            <tr>
                <td>
                    State:
                </td>
                <td>
                    <select name="state" class="form-control"  [(ngModel)]="data.state">
                        <option value="Uttar Pradesh">Uttar Pradesh</option>
                        <option value="Delhi">Delhi</option>
                        <option value="Andhra Pradesh">Andhra Pradesh</option>
                        <option value="Uttarakhand">Uttarakhand</option>
                        <option value="Rajasthan">Rajasthan</option>
                    </select>
                </td>
                <td>data.state</td>
            </tr>
            <tr>
                <td>Address:</td>
                <td>
                    <textarea style="resize: none" name="address" class="form-control"  [(ngModel)]="data.address"></textarea>
                </td>
                <td>data.address</td>
            </tr>
            <tr>
                <td>Email</td>
                <td><input type="email" name="email" class="form-control"  [(ngModel)]="data.email"/>
                </td>
                <td>data.email</td>
            </tr>
            <tr>
                <td>Password:</td>
                <td><input type="Password" name="pass" class="form-control"  [(ngModel)]="data.pass"></td>
                <td>data.pass</td>
            </tr>
            <tr>
                <td><button type="reset" class="btn btn-warning">RESET</button></td>
                <td><button type="submit" class="btn btn-success">SUBMIT</button></td>
            </tr>
        </table>
    </form>
</div>

register.component.ts

import  Component, OnInit,Output,EventEmitter  from '@angular/core';

@Component(
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
)
export class RegisterComponent implements OnInit 
  **@Output() sendToRoot:EventEmitter<object>=new EventEmitter();**
  constructor() 
  ngOnInit(): void 
     this.fetchSelectedItems();
  

  qualification=[
  
    label:'Diploma',
    ischecked:false,
    id:'q1'
  ,
  
    label:'Graduate',
    ischecked:false,
    id:'q2'
  ,
    label:'Masters',
    ischecked:false,
    id:'q3'
  ];
  //function for featching selected qualifications
  selected:string[]=[];
  fetchSelectedItems() 
    this.selected.length=0;
    this.qualification.forEach((value,index)=>
      if(value.ischecked)
        this.selected.push(value.label);
      
    )
  
  changeSelection() 
     this.fetchSelectedItems();
  
  data=uname:"",
  contact:"",
  gender:"",state:"",address:"",email:"",pass:"",qualification2:this.selected;
  //function to be called on form submit
  **collect(evt:object)
    this.sendToRoot.emit(this.qualification);
    alert("Name: "+this.data.uname+"\nContact: "+this.data.contact+"\nGender: "+this.data.gender+"\nqualification: "+this.data.qualification2
      +"\nState: "+this.data.state+"\nAddress: "+this.data.address+"\nEmail: "+this.data.email+"\nPassword: "+this.data.pass);
  **

app.component.html

<app-register (sendToRoot)="getChild($event)"></app-register>  

app.component.ts

import  Component  from '@angular/core';

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
)
export class AppComponent 
  title = 'ReactiveForms';
  sendToDisplay:object=;
  **getChild(data:object)
    this.sendToDisplay=data;
    console.log(data); 
    console.log("from app.component.ts1: \n"+this.sendToDisplay)
    console.log(data.uname)// Error: uname does not exist on object
  **

【问题讨论】：

我会考虑使用ReactiveForms 模块，而不是基于模板的FormsModule。这样您就可以订阅表单，并根据表单中的下一个值向父组件发出。

感谢您的建议。

【参考方案1】：

基本上，您的代码 100% 只处理 1 个问题

下面一行

this.sendToRoot.emit(this.qualification);

您正在发出一系列限定和期望对象！

如果您需要获取data，则发出date 而不是qualification

this.sendToRoot.emit(this.data);

See this demo

【讨论】：

非常感谢。我从昨天开始尝试解决它，现在终于解决了。

太棒了，编码愉快！