Angular 6 - 反应式表单内的自定义控件

Question

我有一个反应形式的 Angular 组件。 表单模型有一个users 列表。 每个user 都有一个特定的模型，所以我的想法是给他们自己的组件，然后将组件（以列表的形式）添加到如下形式：

<mat-form-field>
  <input 
    matInput 
    required 
    placeholder="Budget" 
    autocorrect="on" 
    autocapitalize="off" 
    spellcheck="on" 
    formControlName="budget">
</mat-form-field>

<app-project-users 
  [projectUsers]="projectForm.get('users').value" 
  (changedProjectUsers)="changedProjectUsers($event)">
</app-project-users>

这是正确的方法吗？ 然后我将有一个模型、一个 formsModel 和每个额外的组件“formModel”来处理表单 ngSubmit 方法，这看起来有点 hacky.... 我在官方文档和网络上都找不到关于此类问题的任何内容。

谢谢

Answer 1

您可以使用FormArray 来实现这一点。在您创建 formGroup 的父组件中，您应该有类似的内容：

this.fb.group({
    users: this.fb.array()
})

然后，您将FormGroup 或FormControl 添加到每个用户的数组中。然后app-project-users 负责从数组中添加/删除组/控件。

angular docs 上有关于表单数组的教程，您可以在谷歌搜索“角度表单数组”时找到更多示例。

第二种方法是您的app-project-users 将实现ControlValueAccessor 并成为FormControl 本身，其模型将是用户数组。