從子組件獲取數據以在父組件中傳遞事件

Question

我需要有關以下問題的幫助。

我有一個包含 n 個子組件的父組件。

例如：

父組件：

<div class="row">
  <div class="col-6">
    Form1
    <app-form-card></app-form-card>
  </div>
  <div class="col-6">
    Form2
    <app-form-card></app-form-card>
  </div>
  <div class="col-6">
    Form3
    <app-form-card></app-form-card>
  </div>
  <div class="col-6">
    Form4
    <app-form-card></app-form-card>
  </div>
</div>

<div class="row">
  <div class="col-12">
    <button (click)="onSubmit()">Submit</button>
  </div>
</div>

子組件：

<div class="row mb-5">
  <form [formGroup]="profileForm">
  <div class="col-12 mb-2">
    <input type="text" formControlName="user" placeholder="user" />
  </div>
  <div class="col-12 mb-2">
    <input type="password" formControlName="password" placeholder="password" />
  </div>
  </form>
</div>

我需要知道通過單擊提交按鈕獲取所有表單的所有數據的最佳方式（優化、可維護性、可擴展性、良好實踐）是什么。

我目前可以通過兩種方式做到這一點。

1 - 使用 ViewChildren 獲取孩子的參考。 有了這個，我可以訪問所有數據和功能。

2 - 使用 Behaivor Subject 發送表格。

我想知道哪個是最好的？

更新 1

基於用戶ccamac響應的可能解決方案

父組件

  myGroup: FormGroup;

  constructor( private fb: FormBuilder ) {
    this.myGroup = this.fb.group({
      formArray: this.fb.array([
        new FormGroup({
          user: new FormControl('', Validators.required),
          pass: new FormControl('', Validators.required)
        }),
          new FormGroup({
          user: new FormControl('', Validators.required),
          pass: new FormControl('', Validators.required)
        })
      ])
    });
  }

父組件的 HTML

<form (ngSubmit)="onSubmit()" [formGroup]="myGroup" >
<div formArrayName="formArray">
  <div *ngFor="let item of myGroup.controls?.formArray?.controls; let i = index;">
      <div [formGroupName]="i">
          <input type="text" placeholder="Username" formControlName="user">
          <input type="password" placeholder="Password" formControlName="pass">
      </div>
  </div>
</div>
<button type="submit" [disabled]="!myGroup.valid">
  Submit
</button>
</form>

使用此解決方案不需要子組件。

這個解決方案很好，因為它是可維護和可擴展的。

Answer 1

這是使用此處顯示的 FormArray 的絕佳機會https://angular.io/api/forms/FormArray

FormArray 的想法是它包含一個 FormGroups 數組（或實際上任何 AbstractControl）。 所以它非常適合你想要做的事情，因為最終你有一個 FormGroups 數組作為一個集合。 這種方法的好處之一是 FormArray 仍然具有 FromGroup 的許多選項，包括檢查所有子表單的有效狀態並立即獲取所有錯誤。

下面是一種可以為您的案例構建的方法。

父組件模板

<!-- parentFormArray is passed into the child components -->
<div class="row">
  <div class="col-6">
    Form1
    <app-form-card [parentFormArray]="form"></app-form-card>
  </div>
  <div class="col-6">
    Form2
    <app-form-card [parentFormArray]="form"></app-form-card>
  </div>
  <div class="col-6">
    Form3
    <app-form-card [parentFormArray]="form"></app-form-card>
  </div>
  <div class="col-6">
    Form4
    <app-form-card [parentFormArray]="form"></app-form-card>
  </div>
</div>

父組件類

export class ParentComponent implements OnInit {

    form: FormArray;

    constructor(
        private fb: FormBuilder,
    ) {}

    ngOnInit(): void {
        this.form = this.fb.array([]); // start the formArray off as a blank array
    }

子組件模板（此處無需更改）

<div class="row mb-5">
  <form [formGroup]="profileForm">
  <div class="col-12 mb-2">
    <input type="text" formControlName="user" placeholder="user" />
  </div>
  <div class="col-12 mb-2">
    <input type="password" formControlName="password" placeholder="password" />
  </div>
  </form>
</div>

子組件類

export class ChildComponent implements OnInit {

    @Input() parentFormArray: FormArray; // this was passed in from the parent

    profileForm: FormGroup; // not sure how this is being built out, but I'm sure you are handling it somewhere

    constructor(
        private fb: FormBuilder,
    ) {}

    ngOnInit(): void {
        // first do whatever code is needed to build out the profile form
        // then push it onto the parent form array
        this.parentFormArray.push(this.profileForm);
    }