Angular 4/ Reactive Forms -在子组件中添加控件

Angular 4是一种流行的前端开发框架，它提供了一种结构化的方法来构建Web应用程序。Reactive Forms是Angular中的一种表单处理机制，它使用响应式编程的概念来处理表单数据。

在Angular 4中，在子组件中添加控件可以通过以下步骤完成：

在父组件中创建一个FormGroup对象，并将其传递给子组件。FormGroup是一个表单控件组的容器，它可以包含多个FormControl对象。
在子组件中，使用@Input装饰器接收父组件传递的FormGroup对象。
在子组件的模板中，使用FormGroup对象的属性来绑定表单控件。可以使用FormControlName指令将表单控件与FormGroup中的属性关联起来。
在子组件中，可以使用FormGroup对象的addControl方法来动态添加表单控件。该方法接受一个控件名称和一个FormControl对象作为参数。

下面是一个示例代码：

父组件：

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-parent',
  template: `
    <form [formGroup]="form">
      <app-child [form]="form"></app-child>
    </form>
  `
})
export class ParentComponent {
  form: FormGroup;

  constructor() {
    this.form = new FormGroup({
      name: new FormControl(''),
      email: new FormControl('')
    });
  }
}

子组件：

import { Component, Input } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-child',
  template: `
    <div [formGroup]="form">
      <input formControlName="name" placeholder="Name">
      <input formControlName="email" placeholder="Email">
      <button (click)="addControl()">Add Control</button>
    </div>
  `
})
export class ChildComponent {
  @Input() form: FormGroup;

  addControl() {
    this.form.addControl('newControl', new FormControl(''));
  }
}

在上面的示例中，父组件创建了一个FormGroup对象，并将其传递给子组件。子组件接收到FormGroup对象后，在模板中使用FormControlName指令绑定了两个表单控件（name和email）。在子组件的addControl方法中，使用FormGroup对象的addControl方法动态添加了一个名为newControl的表单控件。

这样，当点击"Add Control"按钮时，子组件中的addControl方法会被调用，新的表单控件会被添加到FormGroup中，并在模板中显示出来。

推荐的腾讯云相关产品和产品介绍链接地址：