如何在Angular4中使用FormArray (奇怪的行为)

在Angular4中使用FormArray时，可能会遇到一些奇怪的行为。下面是一些解决这些问题的方法：

1. 首先，确保你已经导入了FormsModule或ReactiveFormsModule。这两个模块提供了表单相关的功能。
2. 在组件类中，创建一个FormArray实例，并将其初始化为空数组。可以使用FormGroup和FormControl来创建表单控件。

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

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

@Component({

 selector: 'app-your-component',

 templateUrl: './your-component.component.html',

 styleUrls: ['./your-component.component.css']

})

export class YourComponent {

 form: FormGroup;

 constructor() {

   this.form = new FormGroup({

     formArray: new FormArray([])

   });

 }

}

1. 在模板中，使用formArrayName指令将FormArray与HTML元素关联起来，并使用*ngFor指令循环遍历FormArray中的控件。

<form [formGroup]="form">

 <div formArrayName="formArray">

   <div *ngFor="let control of form.get('formArray').controls; let i = index">

     <input [formControlName]="i" type="text">

   </div>

 </div>

</form>

1. 如果你想动态地添加或删除FormArray中的控件，可以使用push和removeAt方法。

addControl() {

 (this.form.get('formArray') as FormArray).push(new FormControl(''));

}

removeControl(index: number) {

 (this.form.get('formArray') as FormArray).removeAt(index);

}

<button (click)="addControl()">Add Control</button>

<button (click)="removeControl(i)">Remove Control</button>

这样，你就可以在Angular4中使用FormArray了。FormArray是一个有用的工具，可以用于处理动态表单控件的集合。它可以用于创建复杂的表单，例如重复的表单字段或表单字段的集合。

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

• 腾讯云云服务器（CVM）：提供可扩展的计算能力，满足各种业务需求。详细信息请访问：https://cloud.tencent.com/product/cvm
• 腾讯云对象存储（COS）：提供安全、稳定、低成本的云端存储服务。详细信息请访问：https://cloud.tencent.com/product/cos
• 腾讯云人工智能（AI）：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等。详细信息请访问：https://cloud.tencent.com/product/ai
• 腾讯云区块链（BCBaaS）：提供高性能、可扩展的区块链服务，帮助企业构建区块链应用。详细信息请访问：https://cloud.tencent.com/product/baas