Angular Form动态字段

Question

我想知道如何使用动态步骤制作角度形式。我有以下表格（TS）：

this.registerForm = new FormGroup({
   role: new FormControl('', [
      Validators.required,
   ]),
   firstName: new FormControl('', [
      Validators.required,
      Validators.minLength(2),
      Validators.maxLength(20),
   ]),
   lastName: new FormControl('', [
      Validators.required,
      Validators.minLength(2),
      Validators.maxLength(20),
    ]),
    email: new FormControl('', [
       Validators.required,
       Validators.email
    ])
});

现在让我们承认我的“角色”FromControl（第一个）允许 2 个不同的值（x 和 y），我应该如何继续在我的表单中拥有一个在角色表单控件的功能上发生变化的新字段？

我计划使用按钮来选择您的角色，然后将我的动态字段放在表单底部。在一种情况下，我想用下拉菜单显示它，而在另一种情况下，我想用芯片组件（都来自角材料）显示它

我不能只制作两个包含两种不同形式的大“ngIf”块，因为用户可能会开始输入，然后将他或她的角色从 x 更改为 y，反之亦然。

为那个动态领域创造第二个是个好主意吗？

非常感谢！ 凯夫。

Answer 1

不，您不应该创建单独的表单，而是只需在检查用户角色的输入中添加 *ngIf。

您可以执行以下步骤：

1. 在您的 component.ts 文件中创建一个 role 变量。
2. OnChange 用户角色值，将role 变量值更新为用户选择的值。
3. 在现有表单中添加不同类型的inputs。
4. 在您的角色特定输入中添加*ngIf，例如<select *ngIf="role == 'ADMIN'> ... </select>
5. 您可以在单一表单中添加所有因角色而异的输入，您只需在这些输入中添加步骤 4。

更新： 如果您想在角色更改时更新特定验证器，您可以在更新角色后执行以下操作：

this.registerForm.controls["firstName"].setValidators([Validators.minLength(1), Validators.maxLength(30)]);

注意：它将删除之前添加的所有验证器。