Question

我有一个带有反应形式的角组件。表单模型具有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本身，并且其模型将是用户数组。

Angular 6-响应式窗体中的自定义控件

1 个答案: