Html 如何在Angular中为动态添加的控件使用ReactiveFormsModule和validations？

我有几个字段像这样连接到FormBuilder

constructor(private builder: FormBuilder) {
  this.form = builder.group({
    "firstName": [...],
    "lastName": [...]
  });
}

在标记中，除了fix控件外，我还有未知数量的输入框。它从零开始，可以增加，因为用户点击一个按钮，每次点击都会增加一个新的输入框。每个输入框都会有一个删除按钮，所以它们的数量是完全动态的

FirstName
姓氏
添加选项

由于需要验证动态添加的字段，我觉得需要在组定义中声明它们。但是我不知道怎么做

当我在谷歌上搜索时，我在

[（ngModel）]

上得到了很多点击，但我也看到它应该与

表单模块一起使用，而不是
中讨论的反应表单模块

我应该怎么做？双绑定ngModel是唯一的选择吗

根据答案进行编辑

HTML


标签
-->

TS

构造函数（私有生成器：FormBuilder）{
this.form=builder.group({
“名字”：[…]，
“姓氏”：[…]，
“标记”：this.builder.array（[]），
});
}
addTag（）：void{
（此.form.controls.tags为FormArray）。？？？；
}

我还尝试在标记中指定一个硬编码数组，如下所示，但没有看到任何控件被呈现


标签
-->
您的场景是正式阵列的目的。请参见此处的文档：

这些文档显示了一个FormGroups数组，但您也可以使用它创建一个FormControls数组

以下是我的应用程序中的一个示例：

    this.productForm = this.fb.group({
        productName: ['', [Validators.required,
                           Validators.minLength(3),
                           Validators.maxLength(50)]],
        productCode: ['', Validators.required],
        starRating: ['', NumberValidators.range(1, 5)],
        tags: this.fb.array([]),
        description: ''
    });

我的“标签”如下所示：

    // Update the data on the form
    this.productForm.patchValue({
        productName: this.product.productName,
        productCode: this.product.productCode,
        starRating: this.product.starRating,
        description: this.product.description
    });
    this.productForm.setControl('tags', this.fb.array(this.product.tags || []));


我将默认值设置到这些控件中，如下所示：

    // Update the data on the form
    this.productForm.patchValue({
        productName: this.product.productName,
        productCode: this.product.productCode,
        starRating: this.product.starRating,
        description: this.product.description
    });
    this.productForm.setControl('tags', this.fb.array(this.product.tags || []));

您可以在这里找到我的示例代码：在“APM”或“APM-Updated”文件夹中

这是Pluralsight课程的代码：
角度反应形式
此处：
如果您只想让此代码正常工作，只需将其更改为数组：

<div *ngFor="let tag of ['uno','duo']; let i = index;" 
     [formGroupName]="i">
  <div class="input-caption">{{ tag }}</div>
  <input formControlName="name"> -->
</div>


{{tag}}
-->

他们也不需要组成小组。如果他们不是：

<div *ngFor="let tag of ['uno','duo']">
  <div class="input-caption">{{ tag }}</div>
  <input [formControlName]="tag"> -->
</div>


{{tag}}
-->

如果这就是你所需要的。。。那么你甚至不需要正式的安排。
谢谢。这是有帮助的，但我仍然有点卡住了，因为我试图以一种不同的方式来处理它。我没有明确的模型，只使用
私有表单：FormGroup
。因此，我需要访问“标签”，并在单击“添加”按钮时向该数组添加一个新组。但是，尝试
（this.form.controls.tags as FormArray）。？
不会产生任何我认为有用的结果。在这种情况下，您会怎么做？我已经用新的语法更新了这个问题。我添加了一个单独的回答，因为它是一个不同的答案。希望有帮助。如果没有，也许你可以创建一个plunker来演示你想做的事情。