Angular 7，为formarray控件动态赋值

Angular 7是一种流行的前端开发框架，它提供了一种结构化的方法来构建Web应用程序。在Angular 7中，FormArray是一个用于处理动态表单控件的特殊类型。

FormArray是一个由FormControl组成的有序集合，它允许我们在表单中动态添加、删除和修改控件。通过FormArray，我们可以处理多个表单控件的值，并对其进行验证和操作。

在Angular中，我们可以使用FormBuilder来创建和管理FormArray。下面是一个示例代码，展示了如何在Angular 7中为FormArray控件动态赋值：

首先，我们需要在组件中导入相关的模块和类：

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

然后，在组件类中定义一个表单和FormArray控件：

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent {
  myForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.myForm = this.formBuilder.group({
      myFormArray: this.formBuilder.array([])
    });
  }

  get myFormArray(): FormArray {
    return this.myForm.get('myFormArray') as FormArray;
  }
}

接下来，我们可以在组件的初始化方法中动态为FormArray控件赋值：

ngOnInit() {
  // 假设我们有一个包含初始值的数组
  const initialValues = ['Value 1', 'Value 2', 'Value 3'];

  // 使用初始值创建FormControl并将其添加到FormArray中
  initialValues.forEach(value => {
    this.myFormArray.push(this.formBuilder.control(value));
  });
}

最后，我们可以在模板中使用FormArray控件：

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

在上面的示例中，我们使用ngFor指令遍历FormArray控件中的每个FormControl，并将其绑定到输入框中。

总结一下，Angular 7中的FormArray控件允许我们动态处理表单中的多个控件。通过使用FormBuilder和FormArray，我们可以轻松地为FormArray控件赋值，并在模板中使用它们。

腾讯云提供了一系列与Angular开发相关的产品和服务，例如云服务器、云数据库、云存储等。您可以在腾讯云官方网站上找到更多关于这些产品的详细信息和文档。

参考链接：