如何以角度一次从多个子组件收集数据？

Question

我的父组件中有多个相同的组件，我想一次从所有这些组件中收集数据。当我点击“添加新表单”按钮时，我只是生成新组件。我需要生成多个相同的组件，它们只是表单，但使用不同的数据完成。

这是父组件：

<div *ngFor="let i of studyFormsNmb">
  <app-study-form></app-study-form>
</div>
<button mat-raised-button (click)="increaseStudyForm(1)">Add studies</button>

和他的打字稿文件

studyFormsNmb = Array(1);

  increaseStudyForm(i) {
    this.studyFormsNmb.push(i);
  }

这是子组件html：

<div>
  <form [formGroup]="studyFormGroup" class="studyForm">
    <mat-form-field appearance="outline">
      <mat-label>Study place</mat-label>
      <input
        matInput
        placeholder="Study place"
        formControlName="placeCtrl"
        required
      />
      <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
    </mat-form-field>
    <mat-form-field appearance="outline">
      <mat-label>Period</mat-label>
      <input
        matInput
        placeholder="Period"
        formControlName="periodCtrl"
        required
      />
      <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
    </mat-form-field>
    <mat-form-field appearance="outline">
      <mat-label>Study level</mat-label>
      <input
        matInput
        placeholder="Study level"
        formControlName="levelCtrl"
        required
      />
      <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
    </mat-form-field>
    <mat-form-field appearance="outline">
      <mat-label>Degree</mat-label>
      <input
        matInput
        placeholder="Degree"
        formControlName="degreeCtrl"
        required
      />
      <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
    </mat-form-field>
  </form>
</div>

和他的打字稿文件：

studyFormGroup: FormGroup;

  constructor(private _formBuilder: FormBuilder) {}

  ngOnInit(): void {
    this.createFormControl();
  }

  createFormControl() {
    this.studyFormGroup = this._formBuilder.group({
      placeCtrl: ["", Validators.required],
      periodCtrl: ["", Validators.required],
      levelCtrl: ["", Validators.required],
      degreeCtrl: ["", Validators.required],
    });
  }

所以我需要来自所有这些表单的数据，作为每个表单的单独对象，以添加到对象列表中。我搜索并考虑了@Input 和@Output，但有些东西没有加起来，我不知道如何从每个组件中获取单独的数据，如果需要，我是否需要每个组件的 ID？

Answer 1

这对你有帮助

父组件

<div *ngFor="let i of studyFormsNmb">
  <dialog-content-example-dialog (newItemEvent)="receiveForm($event)"></dialog-content-example-dialog>
</div>
<button mat-raised-button (click)="increaseStudyForm(1)">Add studies</button>

The test will show all forms {} in the array

Message: {{arrForms | json}}

子组件

<div>
  <form [formGroup]="studyFormGroup" (ngSubmit)="onSubmit()" class="studyForm" >
    <mat-form-field appearance="outline">
      <mat-label>Study place</mat-label>
      <input
        matInput
        placeholder="Study place"
        formControlName="placeCtrl"
        required
      />
      <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
    </mat-form-field>
    <mat-form-field appearance="outline">
      <mat-label>Period</mat-label>
      <input
        matInput
        placeholder="Period"
        formControlName="periodCtrl"
        required
      />
      <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
    </mat-form-field>
    <mat-form-field appearance="outline">
      <mat-label>Study level</mat-label>
      <input
        matInput
        placeholder="Study level"
        formControlName="levelCtrl"
        required
      />
      <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
    </mat-form-field>
    <mat-form-field appearance="outline">
      <mat-label>Degree</mat-label>
      <input
        matInput
        placeholder="Degree"
        formControlName="degreeCtrl"
        required
      />
      <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
    </mat-form-field>

    <button class="button" type="submit">Send</button>
  </form>
</div>

Ts 文件的

import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'dialog-content-example',
  templateUrl: 'dialog-content-example.html',
})
export class DialogContentExample {
  arrForms: Array<{}> = [];
  constructor(public dialog: MatDialog) {}

  studyFormsNmb = Array(1);

  increaseStudyForm(i: any) {
    this.studyFormsNmb.push(i);
  }

 form: {};
receiveForm($event: {}){
  this.form = $event
  this.arrForms.push($event);
}
}

@Component({
  selector: 'dialog-content-example-dialog',
  templateUrl: 'dialog-content-example-dialog.html',
})
export class DialogContentExampleDialog {

@Output() newItemEvent = new EventEmitter<string>();


studyFormGroup: FormGroup;

  constructor(private _formBuilder: FormBuilder) {}

  ngOnInit(): void {
    this.createFormControl();
  }

  createFormControl() {
    this.studyFormGroup = this._formBuilder.group({
      placeCtrl: ["", Validators.required],
      periodCtrl: ["", Validators.required],
      levelCtrl: ["", Validators.required],
      degreeCtrl: ["", Validators.required],
    });
  }
  

  onSubmit() {
    this.newItemEvent.emit(this.studyFormGroup.value);
  }

}

这里是演示app