Question

我正在尝试创建一个Angular 6反应性表单，用于构建json以提交给REST API。结构是这样的：

audioTrack:
  path: /foo.mp4
  track: 1
  actions:
    normalize: {}
    addNoise:
      level: 5
subtitleTracks:
- path: /foo.en.srt
  format: SubRip
  actions:
    convert:
      format: WebVTT
- path: /foo.es.vtt
  format: WebVTT
  actions:
    spellCheck: {}

因此只有一个音轨和一个字幕轨列表这些轨道都是可选的。我想将每个轨道封装为一个组件，该组件具有作为单个Form的一部分的FormGroup。使用按钮添加或删除曲目。

我找不到任何可以做到这一点的例子。我发现有一些内容集中于添加和删除单个控件，而不是整个表单组。

我认为这将是一个典型的用例，我想念什么？

如果我构建一个静态表单，那么一切都可以找到，但是将组件添加到父组件中和从中删除组件这一简单动作很快就会造成混乱，我只是不知道如何进行。

Answer 1

您需要使用Form Array。这允许您（如果您不熟悉）存储form groups的数组，该数组可以从数组堆栈中推入或弹出。可以看到一个示例here。我将解释发生了什么。

（1）通过表单构建器或手动创建表单数组，具体取决于您的喜好
（2）使用标准JavaScript数组push method
（3）使用表单数组类上的removeAt函数从数组中删除组。

注意，您需要使用ngFor来遍历表单数组中的表单组。这使您可以直观地查看从浏览器添加或删除的动态创建的表单组。

这看起来像这样：

<div *ngFor="let track of audioTracks.controls; let i=index" [formGroupName]="i"> Your custom html here... <div>

Answer 2

我认为您缺少的是FormArray。如果我正确理解了您的问题，那么angular.io中有一个教程与您的问题类似：

https://angular.io/guide/reactive-forms搜索表单FormArray

https://stackblitz.com/angular/gdygpengbdl这是本教程的代码和运行应用，选择FormArray演示。在此演示中，您可以添加英雄的地址，类似您想要实现的目标。

如何创建Angular 6反应性表单，通过按钮添加和删除表单组

2 个答案: