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 然后负责 adding/removing groups/control 来自数组。

angular docs 上有表单数组的教程，您可以在 google 上找到更多示例 'angular form arrays'。

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

Angular 6 - 响应式表单中的自定义控件

Angular 6 - Custom Control Inside Reactive Form

angular

angular-reactive-forms