清空 Angular FormArray

当使用 Angular Forms 模块中的 FormArray 时，有时我们需要在需要的时候清空数组的内容。这篇文章将介绍如何使用 JavaScript 来实现清空 FormArray。

步骤

1. 获取需要清空的 FormArray。通常我们会在组件中定义一个 FormGroup 对象，并在其中添加一个 FormArray。

   import { FormGroup, FormArray, FormControl } from '@angular/forms';
   
   export class SampleComponent {
     myForm: FormGroup;
   
     constructor() {
       this.myForm = new FormGroup({
         myArray: new FormArray([])
       });
     }
   
     // ...
   }
   

2. 在组件代码中创建一个方法，该方法将删除 FormArray 中的所有控件。

   export class SampleComponent {
     // ...
   
     clearArray() {
       const arrayControl = this.myForm.controls['myArray'] as FormArray;
       while (arrayControl.length !== 0) {
         arrayControl.removeAt(0);
       }
     }
   
     // ...
   }
   

   在上面的代码中，我们首先获取名为 "myArray" 的控件，然后使用一个循环来逐个删除该数组中的所有元素。

3. 在组件的 HTML 中添加一个用于调用清空方法的按钮。

   <button (click)="clearArray()">Clear Array</button>
   

   当用户点击这个按钮时，我们的 clearArray() 方法将被调用，以清空 FormArray。

结论

在 Angular 中清空 FormArray 非常容易，只需将所有控件从数组中删除即可。我们希望这篇文章对您有所帮助，使您能够更好地管理 Angular Forms 系统中的 FormArray。