Angular 2 Reactive Forms -如何显示与输入元素不同的FormArray控件

Angular 2 Reactive Forms中，如果要显示与输入元素不同的FormArray控件，可以通过以下步骤实现：

在组件的HTML模板中，定义一个<form>标签作为表单的容器。
在组件的Typescript文件中，创建一个FormGroup对象来表示整个表单。
在该FormGroup对象中，创建一个FormArray对象，用于表示FormArray控件。
在HTML模板中，使用Angular的表单指令（如formGroup、formArrayName等）来绑定表单控件与组件中的相应属性。
在组件的Typescript文件中，编写逻辑代码来动态操作FormArray对象，例如添加、删除、更新元素等。

以下是一个完整的示例：

HTML模板文件（component.html）：

<form [formGroup]="myForm">
  <div formArrayName="myFormArray">
    <div *ngFor="let control of myFormArray.controls; let i=index">
      <input type="text" [formControlName]="i">
    </div>
  </div>
</form>

Typescript文件（component.ts）：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

@Component({
  selector: 'app-my-component',
  templateUrl: 'component.html',
})
export class MyComponent implements OnInit {
  myForm: FormGroup;
  
  constructor(private formBuilder: FormBuilder) { }
  
  ngOnInit() {
    this.myForm = this.formBuilder.group({
      myFormArray: this.formBuilder.array([]),
    });
    
    // 添加初始元素
    this.addFormArrayControl();
  }
  
  // 添加新的FormArray控件
  addFormArrayControl() {
    const control = this.formBuilder.control('');
    this.myFormArray.push(control);
  }
  
  // 删除指定位置的FormArray控件
  removeFormArrayControl(index: number) {
    this.myFormArray.removeAt(index);
  }
  
  // 获取FormArray对象
  get myFormArray() {
    return this.myForm.get('myFormArray') as FormArray;
  }
}

在上述示例中，我们创建了一个名为myForm的FormGroup对象，其中包含了一个名为myFormArray的FormArray对象。通过formArrayName指令和formControlName指令，我们将FormArray中的每个元素与输入框进行绑定。

为了动态操作FormArray对象，我们提供了addFormArrayControl()方法和removeFormArrayControl()方法来添加和删除元素。这样用户就可以根据需要动态增加或减少输入框。

此外，我们还定义了一个myFormArray的getter方法，用于方便地获取FormArray对象。

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

云产品：腾讯云云服务器（CVM）- 提供可扩展的计算容量，用于运行各类应用程序和服务。产品链接
云产品：腾讯云数据库MySQL版（CMYSQL）- 提供可靠、安全、高性能的MySQL数据库服务。产品链接
云产品：腾讯云对象存储COS（COS）- 提供高可靠性、低延迟、强安全性的分布式对象存储服务。产品链接请注意，这里的产品链接只是示例，并非真实的腾讯云产品链接。