如何根据 Angular 响应式表单中的不同 select 选项发送不同的表单属性？

Question

由于保密协议，我无法分享实际图片或代码，所以我将通过示例进行解释。

我有一个 Angular 响应式表单，其中包含以下输入字段：

姓名
描述
数据类型（这是具有以下选项的 select 输入）
- 字符串
- 数字
- 日期
根据 selected 数据类型显示的输入字段

根据用户 select 的数据类型，使用 *ngIf 在 UI 上显示不同的输入字段。例如，在 selecting 类型 'STRING' 上，会显示一个接受字符串最大长度的字段；在 selecting 'DATE' 上，显示 select 输入日期格式作为不同的选项。

我正在 ngOnInit() 中构建一个表单，所有这些属性最初都设置为空字符串，如下图所示 link

在向后端发送表单数据时，我正在发送 this.formData.values。如果用户 selected 'NUMBER' 数据类型，scale & precision 将具有来自输入的值，并且 maxLength & format 将是空字符串，类似地，其他字段对于其他数据类型将是空字符串。

现在我的问题是，是否有一种简单易行的方法来仅发送正在使用的属性的表单值并排除具有空字符串的表单属性？

P.S不知道我的问题措辞是否正确，错误之处请省略

Answer 1

这是一个使用removeControl排除空字符串字段的解决方案

remove() {
    Object.keys(this.demoForm.controls).forEach((key) => {
      if (this.demoForm.controls[key].value == '') {
        this.demoForm.removeControl(key);
      }
    });
  }

看到这个demo

如何根据 Angular 响应式表单中的不同 select 选项发送不同的表单属性？

How to send different form properties based on different select option in Angular reactive forms?

angular

angular-reactive-forms