Angular 4：setValue formBuilder 空数组

typescript

Angular 4中，使用setValue方法来初始化一个表单控件的值是一种常见的做法。在某些情况下，我们可能需要将一个空数组设置为表单控件的初始值。本文将介绍如何使用Angular的FormBuilder和setValue方法来实现这一目标，并提供一个案例代码。

在Angular中，表单是一个重要的部分，我们可以使用FormBuilder来创建和管理表单。FormBuilder是Angular提供的一个服务，它可以帮助我们更方便地构建表单，并且提供了一些便捷的方法来操作表单控件的值。

首先，我们需要在组件中导入FormBuilder服务：

typescript
import { FormBuilder, FormGroup } from '@angular/forms';

接下来，在组件类中创建一个空的表单控件：

typescript
export class MyComponent {
  myForm: FormGroup;
  constructor(private formBuilder: FormBuilder) {
    this.myForm = this.formBuilder.group({
      myArray: [[]]
    });
  }
}

在上述代码中，我们使用formBuilder.group方法创建了一个FormGroup对象，并将一个空数组作为初始值传入。注意，这里使用了两个方括号，表示我们要创建一个空的二维数组。

接下来，我们可以使用setValue方法来设置表单控件的值：

typescript
this.myForm.get('myArray').setValue([1, 2, 3]);

在上述代码中，我们使用get方法获取到myArray控件，并使用setValue方法将一个包含1、2、3的数组设置为其值。

通过上述步骤，我们成功地将一个空数组设置为了表单控件的初始值。这在一些需要动态添加元素的场景中非常有用，比如一个可以添加多个输入框的表单。

案例代码：

typescript
import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
  selector: 'my-component',
  template: <code>
    <form [formGroup]="myForm">
      <input type="text" formControlName="myArray">
    </form>
  </code>
})
export class MyComponent {
  myForm: FormGroup;
  constructor(private formBuilder: FormBuilder) {
    this.myForm = this.formBuilder.group({
      myArray: [[]]
    });
    this.myForm.get('myArray').setValue([1, 2, 3]);
  }
}

在上述代码中，我们创建了一个简单的表单，并将myArray设置为一个空数组的初始值。然后，我们使用setValue方法将一个包含1、2、3的数组设置为myArray的值。这样，表单将会显示一个输入框，并且初始值为1、2、3。

一下，使用Angular的FormBuilder和setValue方法，我们可以很方便地将一个空数组设置为表单控件的初始值。这一方法对于动态添加元素的表单非常有用。

注意：在实际应用中，我们可能需要根据具体需求来动态设置表单控件的初始值，以上仅为演示目的。