Angular 表单动态字段

Question

我想知道如何使用动态步骤制作 angular 表单。我有以下表格 (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），我应该如何继续在我的表单中拥有一个根据角色表单的功能而变化的新字段控制 ?

我计划让按钮允许 select 你的角色，然后在表单底部有我的动态字段。在一种情况下，我想用下拉菜单显示它，在另一种情况下，我想用芯片组件显示它（均来自 angular material）

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

从那个动态场中抽出第二个是个好主意吗？

非常感谢！凯夫

Answer 1

不，您不应该创建单独的表单，相反您可以简单地在检查用户角色的输入中添加 *ngIf。

以下是您可以执行的步骤：

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

更新： 如果您想在角色更改时更新特定验证器，您可以在更新角色后这样做：

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

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

Angular 表单动态字段

Angular Form dynamic field

angular

typescript

angular-forms

angular11