如何使用子组件中的动态数据填充angular 2表单？

在Angular 2中，使用子组件中的动态数据填充表单可以通过以下步骤实现：

基础概念

组件通信：父组件与子组件之间的数据传递。
双向数据绑定：Angular中的[(ngModel)]指令用于实现表单控件与组件属性之间的双向数据绑定。
表单控件：Angular表单由一组表单控件组成，每个控件都有一个关联的值和一个状态。

类型与应用场景

模板驱动表单：适用于简单的表单场景。
响应式表单：适用于复杂的表单逻辑和验证。

实现步骤

假设我们有一个父组件和一个子组件，子组件负责显示表单并处理数据，父组件负责传递初始数据并在表单提交后接收更新后的数据。

父组件 (parent.component.ts)

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-child [initialData]="initialData" (dataChange)="onDataChange($event)"></app-child>
  `
})
export class ParentComponent {
  initialData = { name: 'John', age: 30 };

  onDataChange(updatedData: any) {
    console.log('Updated Data:', updatedData);
  }
}

子组件 (child.component.ts)

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

@Component({
  selector: 'app-child',
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <input formControlName="name" placeholder="Name">
      <input formControlName="age" type="number" placeholder="Age">
      <button type="submit">Submit</button>
    </form>
  `
})
export class ChildComponent {
  @Input() initialData: any;
  @Output() dataChange = new EventEmitter<any>();

  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      name: '',
      age: null
    });
  }

  ngOnInit() {
    this.form.patchValue(this.initialData);
  }

  onSubmit() {
    this.dataChange.emit(this.form.value);
  }
}

解释

父组件：
- initialData 是传递给子组件的初始数据。
- onDataChange 方法在子组件提交表单时被调用，接收更新后的数据。

子组件：
- @Input() initialData 接收来自父组件的初始数据。
- @Output() dataChange 是一个事件发射器，用于在表单提交时将数据发送回父组件。
- formGroup 是一个响应式表单，用于管理表单控件的状态和值。
- ngOnInit 生命周期钩子中，使用 patchValue 方法将初始数据填充到表单控件中。
- onSubmit 方法在表单提交时调用，通过 dataChange.emit 发送更新后的数据。