Angular 从子组件获取数据以在父组件中传递事件

我需要帮助解决以下问题

我有一个父组件，它有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>

父组件的Html

  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)
        })
      ])
    });
  }

<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>

提交

使用此解决方案不需要子组件

---

此解决方案很好，因为它具有可维护性和可扩展性。

这是使用此处显示的FormArray的绝佳机会

FormArray的概念是它包含一个FormGroup数组（或者任何抽象控件）。因此，它对于您希望执行的操作非常有效，因为最终您将有一个表单组数组作为一个集合。这种方法的一个好处是FormArray仍然具有FromGroup的许多选项，包括检查所有子表单的有效状态和一次获取所有错误

下面是一个可以为您的案例构建的方法

父组件模板 子组件模板（此处无需更改）

---

您是否考虑过在子组件中实现

ControlValueAccessor

，可维护性和可扩展性，我会考虑创建一个<代码>服务<代码>，因为它们都是单独的组件，或者如前面提到的，已经使用了<代码>控件ValueAccess或<代码>接口。@ JPAVEL，我已经通过表单数组找到了解决方案。它简单、可维护且可扩展。以上我解释。我曾尝试使用ControlValueAccessor，但对多个输入进行验证有点复杂。你能帮我提个建议吗？对吗？或父组件如何检测任何更改？您正在从父组件传入form对象，这意味着您拥有所有子窗体要放入的窗体。所以您应该能够订阅表单的valueChanges事件，这是一个抽象控件

<!-- 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);
    }