Question

我有2个组件，比如EmployeeInfo，CompanyInfo，每个组件都具有反应性表单数据（表单控件），在第二个组件中，我有一个提交按钮。

我的问题是，当我单击第二个组件（CompanyInfo）中的提交按钮并将其发送到后端时，如何从第一个组件（EmployeeInfo）收集表单数据。（发送后端不是主要问题，而是从第一个组成部分是实际问题）。有人可以帮我吗？

Answer 1

这是指组件之间的通信或组件交互。可以通过EventEmitter完成。如果组件之间存在父/子关系，则可以使用@Input和@Output属性使用this之类的EventEmitter。否则，如果组件是独立的（即不是父/子），则可以执行相同的操作，但通过中介服务，一个组件将调用service方法以发出事件，而第二个组件将侦听该服务的发出。如果需要服务，则应使用BehaviorSubject或Observable而不是EventEmitter。这是关于docs组件交互以及所有可能方式的角度live example。

Answer 2

以下是您可以使用的一种方式，

demo1.component.html

<form [formGroup]="profileForm">
    Name: <input type="text" formControlName="firstName"/><br>
    Mobile:<input type="text" formControlName="lastName"/>
</form>

demo1.component.ts

  profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
  });

  ngOnInit() {
    this.profileForm.valueChanges
    .subscribe(form => {
      sessionStorage.setItem('form', JSON.stringify(form));
    }); 
  }

demo2.component.html

<input type="submit" id="btnSubmit" (click)="onSubmit()">

demo2.component.ts

onSubmit(){
   let vv = sessionStorage.getItem('form');
   let obj = JSON.parse(vv)
   if (obj != null) {
      alert('firstname: ' + obj.firstName + " lastname: " + obj.lastName);
   }
}

stackblitz上的实时演示

最好先将数据加密，然后再存储到sessionStorage / localStorage中。

Answer 3

您可以使用服务来实现。共享服务将是一个不错的选择

您的服务

public sharedEmployeeInfo = {};

EmployeeInfo.HTML

<form #EmployeeInfo="ngForm">
    .
    .
    <button (click)="SubmitEmployeeInfo(EmployeeInfo.value)">Submit</button>
<form>

EmployeeInfo.TS

import {sharedService} from './sharedService';

constructor(private shared:sharedService){}

SubmitEmployeeInfo(EmployeeInfo){
     // here you will set Employee data to your service object
     this.shared.sharedEmployeeInfo = EmployeeInfo;
}

然后在您的CompanyInfo组件中

import {sharedService} from './sharedService';

constructor(private shared:sharedService){}

EmployeeData;

SubmitCompanydata(){
    // here you will get employee form data 
    this.EmployeeData = this.shared.sharedEmployeeInfo;   
}

Answer 4

为什么没有三个组成部分：具有formGroup = {EmployeeInfo，CompanyInfo}的父级和两个子项（每个子项都具有带有Employ和Company数据的FormGroup）。父母让Boton提交

父母

public abstract class AbstractDAProcedureMenuReceivedHandler<T extends AbstractDAProcedureMenuReceivedEvent> extends DaCommonEventHandler<T> {

    private static final Logger logger = LoggerFactory.getLogger ( AbstractDAProcedureMenuReceivedHandler.class);

company-info

<form *ngIf="myForm" [formGroup]="myForm" (submit)="submit()">
   <app-company-info [control]="myForm.get('companyInfo')"></app-company-info>
   <app-employee-info [control]="myForm.get('employeeInfo')"></app-employee-info>
   <button>submit</button>
</form>
{{myForm?.value|json}}

constructor(private fb:FormBuilder){}
  myForm=this.fb.group({
     companyInfo:this.fb.group({
         name:'',
         address:''

     }),
     employeeInfo:this.fb.group({
         firstName:'',
         secondName:''
     })
})

员工信息

     <form *ngIf="control" [formGroup]="control">
        <input formControlName="name">
        <input formControlName="address">
     </form>

  @Input() control

请参见stackblitz

Answer 5

谢谢大家的建议/帮助，在这里，我根据我的要求为我的问题提供答案，并根据该要求进行研究，以便对他人有所帮助。 1.使用 Service 实现了组件之间的数据共享。 2.我在每个组件中使用多种形式（获取用户数据）并将所有数据提交到最终组件中，因此用户可以在任何给定时间以任何形式进行修改并为此修改数据，因此我使用了 Observable 。 3.就我而言，我需要使用标签来收集不同类别的数据，因此使用 mat-tab-group 。

Angular 6组件与反应形式数据的交互

5 个答案: